分享程序员开发的那些事...
更新时间：2022-09-13 15:41:31
函数
sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
|
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
26
27
28
|
//scss$baseFontSize: 10px !default;
$gray: #ccc !default;
// pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem;
}body{ font-size:$baseFontSize;
color:lighten($gray,10%);
}.test{ font-size:pxToRem(16px);
color:darken($gray,10%);
}//cssbody { font-size: 10px;
color: #e6e6e6;
}.test { font-size: 1.6rem;
color: #b3b3b3;
} |
运算
sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//scss$baseFontSize: 14px !default;
$baseLineHeight: 1.5 !default;
$baseGap: $baseFontSize * $baseLineHeight !default;
$halfBaseGap: $baseGap / 2 !default;
$samllFontSize: $baseFontSize - 2px !default;
//grid $_columns: 12 !default; // Total number of columns
$_column-width: 60px !default; // Width of a single column
$_gutter: 20px !default; // Width of the gutter
$_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width
|
条件判断及循环
@if判断
@if可一个条件单独使用，也可以和@else结合多条件使用
|
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
26
27
28
29
30
31
32
|
//scss$lte7: true;
$type: monster;.ib{ display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}p { @if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}//css.ib { display: inline-block;
*display: inline;
*zoom: 1;
}p { color: green;
} |
三目判断
语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。
|
1
2
|
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
|
for循环
for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。
$i表示变量，start表示起始值，end表示结束值，
这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//scss@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}//css.item-1 {
width: 2em;
}.item-2 {
width: 4em;
}.item-3 {
width: 6em;
} |
@each循环
语法为：@each $var in <list or map>
其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
单个字段list数据循环
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//scss$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list { .#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}//css.puma-icon {
background-image: url("/images/puma.png");
}.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}.egret-icon {
background-image: url("/images/egret.png");
}.salamander-icon {
background-image: url("/images/salamander.png");
} |
多个字段list数据循环
|
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
26
27
28
|
//scss$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data { .#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}//css.puma-icon {
background-image: url("/images/puma.png");
border: 2px solid black;
cursor: default;
}.sea-slug-icon {
background-image: url("/images/sea-slug.png");
border: 2px solid blue;
cursor: pointer;
}.egret-icon {
background-image: url("/images/egret.png");
border: 2px solid white;
cursor: move;
} |
多个字段map数据循环
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//scss$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings { #{$header} {
font-size: $size;
}
}//cssh1 {
font-size: 2em;
}h2 {
font-size: 1.5em;
}h3 {
font-size: 1.2em;
} |
后续详情学习，可参照大漠老师的博客
http://www.w3cplus.com/sassguide/syntax.html