SassScript 支持 6 种主要的数据类型:
- 数字,1, 2, 13, 10px
- 字符串,有引号字符串与无引号字符串,“foo”, ‘bar’, baz
- 颜色,blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型,true, false
- 空值,null
- 数组 (list),用空格或逗号作分隔符
- maps相当于 JavaScript 的 object,(key1: value1, key2: value2)
- SassScript 也支持其他 CSS 属性值,比如 Unicode 字符集,或 !important 声明
1.字符串:
字符串分为有引号字符串和无引号字符串
@debug string.unquote(".widget:hover"); // .widget:hover
//unquote转换为不带引号字符串
@debug string.quote(bold); // "bold"
//quote转换为带引号字符串
@mixin firefox-message($selector){
body.firefox #{$selector}::before{
content: 'hello,Siri';
}
}
@include firefox-message(".header");
.
2、数组类型
$array:(40px,50px,60px);
@each $size in $array{
.icon-#{$size}{
font-size: $size;
height: $size;
}
}
$padding_number:(10px 20px 30px);
p{
/*!添加数据*/
padding: append($padding_number,10px);
/*!索引数据*/
$number_index:index($padding_number,30px);
content: "#{$number_index}";
/*!搜索数据*/
$number:nth($padding_number,1);
content: "#{$number}";
}
更多list方法请参考:Sass英文文档
3、map类型
$font-color: rgba(0,255,0,0.5);
$background-color:hsla(20, 20%, 85%, 0.7);
$font-weight:("normal":400,"medium":500,"bold":700);
@debug map-get($map: $font-weight, $key:medium );
#main{
font-weight: map-get($map: $font-weight, $key: medium);
//map-get获取数据
@each $fw,$fwv in $font-weight{
.divbox-#{$fw}{
font-weight: $fwv;
}
}
color:$font-color;
background-color: $background-color;
}
$maps:("color":green);
$gups:("font-size":18px,"box-sizing":border-box);
$maps:map.merge($maps,$gups); //增加数据
@each $key,$value in $maps{
div{
#{$key}:#{$value};
}
}
更多list方法请参考:Sass英文文档