SCSS 进阶语法

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能，类似于脚本语言，可以实现条件语句、循环语句等功能， SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。

Map

Tip

参考：

【译】介绍Sass Maps：用法跟例子 | Aotu.io「凹凸实验室」
Sass map get | 卡斯伯 Blog - 前端，沒有極限

SCSS Maps 是一种由键值对组成的数据结构，各键值对之间通过 , 来分割，这些键值对通过括号 () 包围起来，结合 SassScript（Sass 提供了一些内置的方法）对其进行分析和信息提取。

scss

$mapName: (
  keyName: value,
  nextkey: nextvalue
);

Tip

sass map 需要在 sass 版本是 3.3 以上才可以使用，在终端使用命令 sass -v 查询当前系统编译所使用的 sass 版本。

使用方法 map-get($mapName, keyName) 读取 Map 特定键的值

scss

$map: (
  key: value,
  nextkey: nextvalue
);

.element:before {
  content: map-get($map, key);
}

🔨 编译结果

css

.element:before {
  content: value
}

Tip

通过 @each 遍历 Map 键值对，可以创建与 Bootstrap 相似的类属性结构，并填充相应的样式

scss

// Map 存储按钮的不同状态的样式值（嵌套结构，类似 JSON）
$btn-config:(
    default:(
        class: 'default',
        color: #333,
        bg: #fff,
        border-color: #ccc
    ),
    primary:(
        class: 'primary',
        color: #fff,
        bg: $brand-primary,
        border-color: darken($brand-primary, 0)
    ),
    danger:(
        class: 'danger',
        color: #fff,
        bg: $brand-danger,
        border-color: darken($brand-danger, 0)
    )
);

// 用 @each 遍历 Map 键值对
@each $name, $value in $btn-config {
  // 用方法 map-get() 取出各个属性值
  $class: map-get($value, class);
  $color: map-get($value, color);
  $bg: map-get($value, bg);
  $border-color: map-get($value, border-color);

  // 构建类属性，并填充相应的样式值
  .btn-#{$class}{
    color: $color;
    background-color: $bg;
    border-color: $border-color;
    &:hover{
      background-color: darken($bg, 5%);
      border-color: darken($border-color, 5%);
    }
  }
}