Css 什么是$foo:（“bar”baz，…）；SASS中的语法含义？

Google Materialize在此文件中定义了它们的名称，如下所示：

$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;
}

如何直接调用这些变量？它们被用在其他地方，我在任何地方都找不到关于这个语法的任何东西

编辑：我在Materialize Github中查看了更多内容，并在以下内容中找到了一些示例：

---

但是，如果您能给我介绍一篇讨论用于定义变量的语法的文章，我将不胜感激。

这种语法表示法称为

SASS-Maps

表示法，它是hash-Maps的SASS等价物。阅读更多信息。

您正在寻找

地图获取（$red，'light-5'）如果您只是想从该映射中获取相应的值

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

在链接到的文件中，这些颜色中的每一种都放置在一个较大的
$colors
地图中：

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

然后对该颜色映射进行迭代，生成匹配的类选择器，如CSS中的
red.lighte-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文件中实际使用这些变量（例如，在导入
\u color.scss
后，可以使用
map get（$map，$key）
访问映射值。例如：

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

编辑：关于
颜色
功能：
$primary color:color（“物化红色”、“变亮-2”）
您发布的行正在使用
\u color.scss
中定义的函数，该函数表面上与
map get
的功能相同，但会使用
map has key
检查地图中是否存在密钥，如果找不到该密钥，则会发出警告

@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;
}

@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;
}