Question

Google Materialize在此文件中定义了color variables，如下所示：

$red: (
  "lighten-5":  #FFEBEE,
  "lighten-4":  #FFCDD2,
  "lighten-3":  #EF9A9A,
  "lighten-2":  #E57373,
  "lighten-1":  #EF5350,
  "base":       #F44336,
  "darken-1":   #E53935,
  "darken-2":   #D32F2F,
  "darken-3":   #C62828,
  "darken-4":   #B71C1C,
  "accent-1":    #FF8A80,
  "accent-2":    #FF5252,
  "accent-3":    #FF1744,
  "accent-4":    #D50000
);

我想使用这样的颜色：

.light-red-border {
    border: 1px solid $red-lighten-1;
}

如何直接调用这些变量？它们在其他地方使用过，我无法在任何地方找到这种语法。

编辑：我在Materialise Github中查了一下，在_variables.scss中找到了一些例子：

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

但是，如果您可以指导我讨论用于定义变量的语法的文章，我将非常感激。

Answer 1

如果您只是想要此地图中的相应值，那么您正在寻找map-get($red, 'lighten-5');。

为了扩展@weirdpanda的答案，需要对这些SASS maps进行迭代，然后编译成更多的CSS规则。

在您关联的文件中，每种颜色都放在$colors的较大地图中：

$colors: (
  "materialize-red": $materialize-red,
  "red": $red,
  "pink": $pink,
  "purple": $purple
  //...
);

然后迭代此颜色映射，在CSS中生成匹配的类选择器，如red.lighten-5。

@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 {
      .#{$color_name}.#{$color_type} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text.text-#{$color_type} {
        color: $color_value !important;
      }
    }
  }
}

要在SASS文件中实际使用这些变量（例如，在导入_color.scss之后，您可以使用map-get($map, $key)访问地图值。例如：

.my-class{    
   color: map-get($red, 'lighten-5');
}

编辑：关于color函数：您发布的$primary-color: color("materialize-red", "lighten-2")行使用_color.scss中定义的函数，表面上与{ {1}}但是检查密钥是否存在于map-get的地图中，并在无法找到时发出警告。

map-has-key

Answer 2

此语法表示法称为SASS Maps表示法，它是哈希映射的SASS-equiv。阅读更多相关信息here。

$ foo是什么：（＆＃34; bar＆＃34;：baz，...）;语法在SASS中意味着什么？

2 个答案: