函数
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 *
1
rem;
}
body{
font-size
:$baseFontSize;
color
:lighten($
gray
,
10%
);
}
.test{
font-size
:pxToRem(
16px
);
color
:darken($
gray
,
10%
);
}
//css
body {
font-size
:
10px
;
color
:
#e6e6e6
;
}
.test {
font-size
:
1.6
rem;
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
$lte
7:
true;
$type: monster;
.ib{
display
:inline-
block
;
@if $lte
7
{
*
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: (h
1:
2em
, h
2:
1.5em
, h
3:
1.2em
);
@each $header, $size in $headings {
#{$header} {
font-size
: $size;
}
}
//css
h
1
{
font-size
:
2em
;
}
h
2
{
font-size
:
1.5em
;
}
h
3
{
font-size
:
1.2em
;
}
|
后续详情学习，可参照大漠老师的博客
http://www.w3cplus.com/sassguide/syntax.html
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1871533
