sass在3.3引入map类型，它与JS的对象非常相似，它有两种定义模式。外面都是用小括号括括起来，每个键值对可以像JS那样与逗号分开。不同之后是，键名与键值之间的冒号不是 必须的

不用对象的情况

@charset "utf-8";//必须设置了这个才能编译有中文的注释//创建一个核心的颜色$bravo_gray: #333;// 将创建的核心颜色分配给一个有语义化的变量$input-disabled-color:          $bravo_gray;$input-disabled-background:     lighten($input-disabled-color, 75%);$input-disabled-border:         lighten($input-disabled-color, 50%);$input-disabled-text:           lighten($input-disabled-color, 50%);input[disabled] {  background-color: $input-disabled-background;  border-color: $input-disabled-border;  color: $input-disabled-text;}//-------------------------input[disabled] {  background-color: #f2f2f2;  border-color: #b3b3b3;  color: #b3b3b3; }

使用对象的情况

@charset "utf-8";//必须设置了这个才能编译有中文的注释//创建一个核心的颜色$bravo_gray: #333;// 将创建的核心颜色分配给一个有语义化的变量$input-disabled-color:          $bravo_gray;//键名与键值之间没有冒号,此为旧语法$input: (  disabled-background lighten($input-disabled-color, 75%),  disabled-border lighten($input-disabled-color, 50%),  disabled-text lighten($input-disabled-color, 50%));input[disabled] {  background-color: map-get($input, disabled-background);  border-color: map-get($input, disabled-border);  color: map-get($input, disabled-text);}//-------------------------input[disabled] {  background-color: #f2f2f2;  border-color: #b3b3b3;  color: #b3b3b3; }

可以看到层次感更强了

我们再加上冒号试试

@charset "utf-8";//必须设置了这个才能编译有中文的注释//创建一个核心的颜色$bravo_gray: #333;// 将创建的核心颜色分配给一个有语义化的变量$input-disabled-color:          $bravo_gray;//键名与键值之间没有冒号$input: (//这是新语法  disabled-background: lighten($input-disabled-color, 75%),  disabled-border: lighten($input-disabled-color, 50%),  disabled-text: lighten($input-disabled-color, 50%));input[disabled] {  background-color: map-get($input, disabled-background);  border-color: map-get($input, disabled-border);  color: map-get($input, disabled-text);}//-------------------------input[disabled] {  background-color: #f2f2f2;  border-color: #b3b3b3;  color: #b3b3b3; }

我们再认真看一下$input这东西，其实它的键名可以设计得更整齐统一的，那么下方我们就可以直接循环了。

@charset "utf-8";//必须设置了这个才能编译有中文的注释//创建一个核心的颜色$bravo_gray: #333;// 将创建的核心颜色分配给一个有语义化的变量$input-disabled-color:          $bravo_gray;//键名与键值之间没有冒号$input: (disabled-background-color: lighten($input-disabled-color, 75%),disabled-border-color: lighten($input-disabled-color, 50%),disabled-color: lighten($input-disabled-color, 50%));input[disabled]{    $arr: background-color border-color  color;    @each $name in $arr{        #{$name}:map-get($input, disabled-#{$name})    }}

我们可以将$input设计得更简洁些，去掉杂质，更名为$disabled-input。然后利用@each可以同时遍历出键名与键值的技巧，将它精简到极致。

@charset "utf-8";//必须设置了这个才能编译有中文的注释//创建一个核心的颜色$bravo_gray: #333;// 将创建的核心颜色分配给一个有语义化的变量$input-disabled-color:          $bravo_gray;//键名与键值之间没有冒号$disabled-input: (    background-color: 75%,    border-color: 50%,    color: 25%);input[disabled]{    @each $key, $val in $disabled-input{        #{$key}:lighten($input-disabled-color,  $val);    }}

有了冒号，方便我们定义深层沟的对象。

$var: (    key: (        key: value,        key: value,        key: (            key: value,            key: value        )    ));

上面的$disabled-input可改成

$input: (    disabled: (        background-color: 75%,        border-color: 50%,        color: 25%    ));//这里定义更多有用方法//https://github.com/lunelson/sass-list-maps/blob/master/_sass-list-maps.scss