为什么 _partial 包含在 sass 中答案

【问题标题】：why is a _partial in sass included为什么 _partial 包含在 sass 中
【发布时间】：2018-06-28 07:14:18
【问题描述】：

我有一个名为“_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 中

和我的咕噜声有关吗？

【问题讨论】：

关注此文档sass-lang.com/ruby-sass
您能发布您的 gruntfile 以便我们也能看到吗？

标签： css sass gruntjs materialize

【解决方案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

【讨论】：

我在这些 components.scss 中有 main.scss component1.scss component2.scss，我可能想在 _colour.scss 中使用一些变量。但是从 materializecss 开始，两个变量的声明都被输出到 css 中，就像 foreach 函数的用途一样

【解决方案2】：

如果没有下划线，您的构建工具 (grunt) 可能会为文件夹中的每个 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

【讨论】：