1. 变量申明及应用
$color: red;
.box {color: $color;}
2. mixin 和 include
2.1 简略应用
$bgColor: red;
@mixin bg {background: $bgColor;}
.box {@include bg;}
编译后果:
.box {background: red;}
2.2 进阶应用
$namespace: 'zz';
@mixin B($name){
$aaa: $namespace + '_' + $name;
.#{$aaa} {@content;}
}
@include B(input) {font-size: 12px;}
编译后果:
.zz_input {font-size: 12px;}
3. 列表和循环
3.1 for 循环
$list: red, green, blue;
@for $i from 1 through 3 {.status-#{$i} {color: nth($list, $i)
}
}
@for $i from 1 to 4 {.status-#{$i} {color: nth($list, $i)
}
}
注:nth
能够获取数组的某个元素;through
和 to
的编译后果统一,要留神是的to 走不到最初一个数
:
.status-1 {color: red;}
.status-2 {color: green;}
.status-3 {color: blue;}
3.2 each 循环
$list:red,green,blur;
@each $item in $list {.#{$item} {color: $item}
}
编译后果:
.red {color: red;}
.green {color: green;}
.blur {color: blur;}
4. map 构造
$colorMap: (
fail: 'red',
success: 'green',
pendding: 'blue'
);
$bgColorMap: (
fail: 'red',
success: 'green',
pendding: 'blue'
);
@each $key, $value in $colorMap {.#{$key} {
color: $value;
border-color: map-get($bgColorMap, $key)
}
}
编译后果:
.fail {
color: "red";
border-color: "red";
}
.success {
color: "green";
border-color: "green";
}
.pendding {
color: "blue";
border-color: "blue";
}
5. 函数
@function vw($n) {@return calc($n*100vw/750)
};
@function px($n) {@return calc(#{var(--rootWidth)} * #{$n} / 1920);
}
@function vh($n) {@return calc($n * 100vh / 1080);
}
body {font-size: vw(10)
}