sass对象的定义

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