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;
// 将创建的核⼼颜⾊分配给⼀个有语义化的变量
htmlborder
$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%
)
);
//这⾥定义更多有⽤⽅法
//github/lunelson/sass-list-maps/blob/master/_sass-list-maps.scss

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。