SASS进阶

发表于 | 分类于

Sass的控制命令

@if

@if指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true返回一个样式块，反之 false返回另一个样式块。在 Sass中除了 @if之外，还可以配合 @else if和 @else一起使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值
//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
.block { @include blockOrHidden; }
.hidden{ @include blockOrHidden(false); }
//CSS
.block { display: block; }
.hidden { display: none; }
@for循环

在制作网格系统的时候，大家应该对 .col1~.col12这样的印象较深。在 CSS中你需要一个一个去书写，但在Sass中可以使用 @for循环来完成。

1
2
3
4
5
6
7
8
9
//在 Sass 的 @for 循环中有两种方式
@for $i from <start> through <end>
@for $i from <start> to <end>
$i表示变量
start 表示起始值
end 表示结束值
这两个的区别是关键字 through表示包括 end这个数，而 to则不包括 end这个数

through关键字例子

1
2
3
4
5
6
7
8
9
//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; }

to关键字例子

1
2
3
4
5
6
7
8
//SCSS
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
//CSS
.item-1 { width: 2em; }
.item-2 { width: 4em; }

@for应用在网格系统生成各个格子class

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
//CSS
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
.span4 { width: 300px; }
.span5 { width: 380px; }
.span6 { width: 460px; }
.span7 { width: 540px; }
.span8 { width: 620px; }
.span9 { width: 700px; }
.span10 { width: 780px; }
.span11 { width: 860px; }
.span12 { width: 940px; }
//将 @for through 方式换成 @for to
//SCSS
@for $i from 1 to 13 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
//CSS
//其最终编译出来的 CSS 代码和上例所编译出来的一模一样

这两段 Sass 代码并无太多差别，只是 @for中的 取值不同。配合 through 的 值是 12，其遍历出来的终点值也是 12，和 值一样。配合 to 的 值是 13，其遍历出来的终点值是 12，就是 对就的值减去 1 。

@while循环

@while指令也需要 SassScript表达式（像其它指令一样），并且会生成不同的样式块，直到表达式值为 false时停止循环。这个和 @for指令很相似，只要 @while后面的条件为 true就会执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//SCSS
$types: 4;
$type-width: 20px;
@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
//CSS
.while-4 { width: 24px; }
.while-3 { width: 23px; }
.while-2 { width: 22px; }
.while-1 { width: 21px; }

@each循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。

1
2
3
4
5
6
//@each 循环指令的形式
@each $var in <list>
$var就是一个变量名
<list>是一个 SassScript表达式，他将返回一个列表值
变量 $var会在列表中做遍历，并且遍历出与 $var对应的样式块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//SCSS
$list: adam john wynn mason kuroir;//$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio { @include author-images; }
//CSS
.author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason { background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir { background: url("/images/avatars/kuroir.png") no-repeat; }

Sass的函数功能-字符串与数字函数

函数简介

在 Sass中除了可以定义变量，具有 @extend、%placeholder 和 mixins等特性之外，还自备了一系列的函数功能。

  • 字符串函数
  • 数字函数
  • 列表函数
  • 颜色函数
  • Introspection函数
  • 三元函数等
    当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。
字符串函数
unquote()
  • unquote($string)：删除字符串中的引号
  • quote($string)：给字符串添加引号

unquote()函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//SCSS
.test1 { content: unquote('Hello Sass!');}
.test2 { content: unquote("'Hello Sass!");}
.test3 { content: unquote("I'm Web Designer");}
.test4 { content: unquote("'Hello Sass!'");}
.test5 { content: unquote('"Hello Sass!"');}
.test6 { content: unquote(Hello Sass);}
//CSS
.test1 { content: Hello Sass!; }
.test2 { content: 'Hello Sass!; }
.test3 { content: I'm Web Designer; }
.test4 { content: 'Hello Sass!'; }
.test5 { content: "Hello Sass!"; }
.test6 { content: Hello Sass; }

从代码中可以看出，unquote()函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

quote()

quote()函数刚好与unquote()函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 “”。

1
2
3
4
5
6
7
8
9
10
11
//SCSS
.test1 { content: quote('Hello Sass!'); }
.test2 { content: quote("Hello Sass!"); }
.test3 { content: quote(ImWebDesigner); }
.test4 { content: quote(' '); }
//CSS
.test1 { content: "Hello Sass!"; }
.test2 { content: "Hello Sass!"; }
.test3 { content: "ImWebDesigner"; }
.test4 { content: ""; }

使用 quote()函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
//SCSS
.test1 { content: quote(Hello Sass);}
//报错
error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')
//解决方案就是去掉空格，或者加上引号：
//SCSS
.test1 { content: quote(HelloSass); }
//CSS
.test1 { content: quote("Hello Sass"); }

同时 quote()碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_都需要使用双引号括起，否则编译器在进行编译的时候同样会报错

1
2
error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")
error style.scss (Line 16: Invalid CSS after "...t:  quote(Hello": expected ")", was “?);")

To-upper-case()

To-upper-case() 函数将字符串小写字母转换成大写字母

1
2
3
4
5
6
7
8
9
10
11
//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}
//CSS
.test {
    text: AAAAA;
    text: AA-AAAA-AAA;
}

To-lower-case()

To-lower-case()函数 与 To-upper-case()刚好相反，将字符串转换成小写字母

1
2
3
4
5
6
7
8
9
10
11
//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}
//CSS
.test {
    text: aaaaa;
    text: aa-aaaa-aaa;
}

数字函数
percentage()

percentage()函数主要是将数字转换成百分比形式

1
2
3
4
5
6
7
8
9
10
11
12
percentage(.2) //20%
percentage(2px / 10px) //20%
percentage(2em / 10em) //20%
//SCSS
.footer{ width : percentage(.2); }
//CSS
.footer{ width : 20%; }
//如果你转换的值带有单位不统一，那么在编译的时候会报错
percentage(2px / 10em) //报错，SyntaxError: $value: 0.2px/em is not a unitless number for `percentage'

round()

round()函数可以将一个数四舍五入为一个最接近的整数,在round()函数中可以携带带单位的任何数值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
round(12.3) //12
round(12.5) //13
round(1.49999) //1
round(2.0) //2
round(20%) //20%
round(2.2%) //2%
round(3.9em) //4em
round(2.3px) //2px
round(2px / 3px) //1
round(1px / 3px) //0
round(3px / 2em) //2px/em
//SCSS
.footer { width:round(12.3px);}
//CSS
.footer { width: 12px; }

ceil()

ceil()函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身 1的整数。也就是只做入，不做舍的计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ceil(2.0) //2
ceil(2.1) //3
ceil(2.6) //3
ceil(2.3%) //3%
ceil(2.3px) //3px
ceil(2.5px) //3px
ceil(2px / 3px) //1
ceil(2% / 3px) //1%/px
ceil(1em / 5px) //1em/px
//SCSS
.footer { width:ceil(12.3px);}
//CSS
.footer { width: 13px; }

floor()

floor()函数刚好与 ceil()函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算

1
2
3
4
5
6
7
8
9
10
11
12
13
floor(2.1) //2
floor(2.5) //2
floor(3.5%) //3%
floor(10.2px) //10px
floor(10.8em) //10em
floor(2px / 10px) //0
floor(3px / 1em) //3px/em
//SCSS
.footer { width:floor(12.3px);}
//CSS
.footer { width: 12px; }

abs()

abs()函数会返回一个数的绝对值

1
2
3
4
5
6
7
8
9
10
11
12
abs(10) //10
abs(-10) //10
abs(-10px) //10px
abs(-2em) //2em
abs(-.5%) //0.5%
abs(-1px / 2px) //0.5
//SCSS
.footer { width:abs(-12.3px);}
//CSS
.footer { width: 12.3px; }

min()

min()函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数

1
2
3
min(1px,2px,3px) //1px
//携带单位必须要统一

max()

max()函数和 min()函数一样，不同的是max()函数用来获取一系列数中的最大那个值

1
2
3
min(1px,2px,3px) //3px
//携带单位必须要统一

random()

获取0~1数字间随机数

列表函数
length()

返回一个列表的长度值
length($list)函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错

nth()

nth()函数用来指定列表中某个位置的值
nth($list,$n)，函数中的 $n 必须是大于 0 的整数

join()

join($list1, $list2, [$separator]) 将两个列给连接在一起，变成一个列表

append()

append($list1, $val, [$separator]) 将某个值放在列表的最后

zip()

zip($lists…) 将几个列表结合成一个多维的列表

index()

index($list, $value)返回一个值在列表中的位置值（序号从1开始）

Introspection函数
type-of()

type-of()函数主要用来判断一个值是属于什么类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
number 为数值型
string 为字符串型
bool 为布尔型
color 为颜色型
type-of(100) //"number"
type-of(100px) //"number"
type-of("asdf") //"string"
type-of(asdf)  //"string"
type-of(true) //"bool"
type-of(false) //"bool"
type-of(#fff) //"color"
type-of(blue) //"color"
type-of(1 / 2 = 1) //"string"

unit()

unit($number)返回一个值的单位

unitless()

unitless($number)判断一个值是否带有单位

comparable()

comparable($number-1, $number-2) 判断两个值是否可以做加、减和合并

Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值

1
2
3
4
5
6
if($condition,$if-true,$if-false)
//上面表达式的意思是当 $condition 条件成立时，返回的值为 $if-true，否则返回的是 $if-false值
if(true,1px,2px) //1px
if(false,1px,2px) //2px