Question

我有一个名为“ _color.scss”的部分sass，其中包含来自materializecss的这些代码。

$materialize-red: (
 "base":       #e51c23,
  "lighten-5":  #fdeaeb,
  "lighten-4":  #f8c1c3,
  "lighten-3":  #f3989b,
  "lighten-2":  #ee6e73,
  "lighten-1":  #ea454b,
  "darken-1":   #d0181e,
  "darken-2":   #b9151b,
  "darken-3":   #a21318,
  "darken-4":   #8b1014,
);
...

@each $color_name, $color in $colors {
  @each $color_type, $color_value in $color {
    @if $color_type == "base" {
      .#{$color_name} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text {
        color: $color_value !important;
      }
    }
    @else if $color_name != "shades" {
      .#{$color_name}.#{$color_type} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text.text-#{$color_type} {
        color: $color_value !important;
      }
    }
  }
}

// Shade classes
@each $color, $color_value in $shades {
  .#{$color} {
    background-color: $color_value !important;
  }
  .#{$color}-text {
    color: $color_value !important;
  }
}


// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)

@function color($color, $type) {
  @if map-has-key($colors, $color) {
    $curr_color: map-get($colors, $color);
    @if map-has-key($curr_color, $type) {
      @return map-get($curr_color, $type);
    }
  }
  @warn "Unknown `#{name}` in $colors.";
  @return null;
}

然后在其他所有.scss文件中，将其导入。

@import "../../bower_components/materialize/sass/components/color";

在他们的站点上给出以下声明：“下划线让Sass知道该文件只是部分文件，不应将其生成为CSS文件。”，这是否应该从实际的CSS中排除？但是我当前的环境是将部分内容包含到我的CSS中

跟我的咕unt有关系吗？

Answer 1

您不必在每个以上的sass文件中都包含部分文件，这会达到目的。您的文件结构是什么样的？例如，我的文件结构如下所示：

main.scss
_variables.scss
_mixins.scss
_grid.scss
_whatever.scss

，然后进入main.scss

@import 'variables'
@import 'mixins'
@import 'grid'
@import 'whatever'

使用grunt或sass，然后编译main.scss或使用sass：

sass --watch main.scss:style.css

Answer 2

如果没有下划线，则构建工具（咕a声）可能会为文件夹中的每个SCSS文件输出一个CSS文件。例如，使用此文件夹结构（不带下划线）：

my_project
    scss
        main.scss
        colors.scss
        mixins.scss
        component1.scss
        component2.scss

grunt可能会为每个部分输出一个CSS文件：

my_project
    css
        main.css
        colors.css
        mixins.css
        component1.css
        component2.css

大多数人不希望这样做，因此我们使用下划线告诉grunt不要编译每个文件，就像这样：

my_project
    scss
        main.scss
        _colors.scss
        _mixins.scss
        _component1.scss
        _component2.scss

这将输出为：

my_project
    css
        main.css

为什么在sass中包含_partial

2 个答案: