Sass基本语法
关键字:变量、嵌套、混合、函数、指令
# 1.变量
$fontSize: 12px;
div {
font-size: $fontSize;
}
1
2
3
4
2
3
4
# 2.嵌套
article a {
color: blue;
&:hover { color: red }
}
1
2
3
4
2
3
4
# 3.混合
混合器使用@mixin标识符定义,通过@include来使用。
@Mixin clearfix {
zoom: 1;
&:after {
display: table
content: '';
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
}
div {
@include clearfix;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 4.函数
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width+($n-1) * $gutter-width;
}
#sidebar {
width: grid-width(5);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 5.控制指令
Sass提供了@if、@for、@each、@while等指令
//1. @if/@else if/@else:用来判断
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//2. @for:用来循环
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//3. @each:遍历列表或Map时使用
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
上次更新: 2020/09/27, 13:09:00