sass可以定义变量
$width:100px; //以$开头
可以用#{} 进行scss的插入,类似于es6的${}
sass导入功能
@import 'aa.scss' //导入一个
@import 'aa.scss' ,'bb.scss' //导入两个或多个
在同一个sass中使用复用样式extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
控制指令 (if 循环)
- if
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
- for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
- each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
- while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
混合指令
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }
类似函数一样,但是用的是样式
@mixin定义
@include 引用
函数指令
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }