如何在 scss 类中导入 scss 文件

Question

当我向 body 添加“dark-theme”类时，我想添加一个不同的主题。 我的实现是这样的：

@import '../../../../node_modules/angular-grids/styles/material.scss';

.app-dark {
  @import '../../../../node_modules/angular-grids/styles/material-dark.scss';
}

没有任何运气。 关于如何做到这一点的任何线索？

Answer 1

有两种方法可以做到这一点。 它们都包含mixin。

meta.load-css

sass:meta功能使您能够做您想做的事。

假设您有一个带有主题的 scss 文件：

//theme/_code.scss
$border-contrast: false !default;

code {
  background-color: #6b717f;
  color: #d2e1dd;
  @if $border-contrast {
    border-color: #dadbdf;
  }
}

您可以将该代码包含在另一个 scss 文件中，如下所示：

// other-theme.scss
@use "sass:meta";

body.dark {
  @include meta.load-css("theme/code",
      $with: ("border-contrast": true));
}

这将导致以下 css：

body.dark code {
  background-color: #6b717f;
  color: #d2e1dd;
  border-color: #dadbdf;
}

您可以在此处阅读有关此功能的更多信息

老式混音

但是如果你使用mixin 和 include ，你基本上可以做同样的事情。

因此，假设您有一个要导入另一个类的类：

.title {
  font-size: 2em;
  font-weight: bold;
}

还有另一个主题的 sass 文件：

.dark-theme {
  .title {
    font-size: 2em;
    font-weight: bold;
    color: white;
  }
}

您可以使用 scss mixin 并将其导入到两个文件中：

mixin.scss

@mixin shared-items() {
  .title {
    font-size: 2em;
    font-weight: bold;
  }
}

然后，在主题文件中：

白色主题.scss

@import './mixin.scss';

/* will be included as is without a parent class */
@include shared-items;

黑暗主题.scss

@import './mixin.scss';

/* will be included inside the dark-theme class */
.dark-theme {
  .title {
    color: white;
  }

  @include shared-items;
}

这将生成此 css：

.title {
  font-size: 2em;
  font-weight: bold;
}

.dark-theme {
  .title { color: white; }
  .title {
    font-size: 2em;
    font-weight: bold;
  }
}

请注意，您还可以将参数传递给 mixin 并将它们用作函数。 因此，您可以轻松传递颜色并将它们与主题变量一起使用。

例如：

# an example of giving a color to a placeholder mixin:
@mixin nk-placeholder($color: #C4C4CC) {
    &::-webkit-input-placeholder {
        color: $color;
        font: inherit;
    }
    &::-moz-placeholder {
        color: $color;
        font: inherit;
    }
    &:-ms-input-placeholder {
        color: $color;
        font: inherit;
    }
    &:-moz-placeholder {
        color: $color;
        font: inherit;
    }
    &::placeholder {
        color: $color;
        font: inherit;
    }
}

# same thing as above
@mixin shared-items($text-color: black) {
  .title {
    font-size: 2em;
    font-weight: bold;
    color: $text-color;
  }
}


.white-theme {
  @include shared-items;
}

.dark-theme {
  @include shared-items(white);
}