css - 为什么包含 _partial in sass

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 中

这与我的咕噜声有关吗？

Answer 1

您不必在每个 over 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