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
sass对象的定义
时间: 2024-10-14 15:59:17