如何在scss类中导入scss文件

Question

当我将"dark- theme“类添加到body时，我想添加一个不同的主题。我的实现如下所示：

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

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

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

Answer 1

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

meta.load-css

sass:meta feature提供了做你想做的事情的能力。

假设你有一个主题的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 and include，你基本上可以做同样的事情。

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

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

和另一个主题的sass文件：

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

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

mixin.scss

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

然后，在主题文件中：

white-theme.scss

@import './mixin.scss';

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

dark-theme.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);
}