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
@mixin blockOrHidden($boolean: true){
@if $boolean{
@debug "$boolean is #{$boolean}"; //@debug指令用于调试
display: block;
}
@else {
@debug "$boolean is #{$boolean}"; //@debug指令用于调试
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden {
@include blockOrHidden(false);
}

编译出的css为

1
2
3
4
5
6
.block {
display: block;
}
.hidden {
display: none;
}

for循环

在制作网格系统的时候,我们都需要使用到.col1~.col12这样的类名,在css中需要一个个去写,但是在sass 中可以很容易地使用@for循环来完成。
for循环有两种实现方式

1
2
3
4
@for $i from <start> through <end>   
//$i表示变量 start表示起始值 end表示结束值
@for $i form <start> to <end>
//二者区别是,关键字through表示包括end这个数,而to表示不包括end这个数

@for循环在网格系统生成每个格子的class代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$grid-prefix: span;
$grid-width: 60px;
$grid-gutter: 20px;
%grid {
float: left;
margin-left: $grid-gutter /2;
margin-right: $grid-gutter /2;
}
@for $i form 1 through 12 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}

编译出的css为

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
49
50
51
52
53
.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::

1
2
3
4
5
6
@for $i from 1 to 13 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}

@while循环

@while指令也需要SassScript表达式,并且会生成不同的代码块,直到表达式值为false时停止循环。

1
2
3
4
5
6
7
8
$types: 4;
$type-width: 20px;
@while $types > 0{ //等价于while( types = 4 , types > 0);
.while-#{$types}{ //等价于.while-types{
width: $types-width + $types; //等价于width: 20px - types;
}
$types: $types - 1; //等价于 4--;
}

@each循环

@each循环就是去遍历一个列表,然后从列表中取出对应的值。
@each命令的形式:

1
@each $var in <list>

$var 是一个变量名,list是一个列表,用于进行引用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$list: adam john wynn mason kuroir; //列出列表,供下面进行引用
@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的字符串函数主要包括两个

1
2
3
4
unquote($string); 
//删除字符串中的引号,如果字符串中没有引号,将返回原始字符串。注:unquote()函数只能删除字符串最前和最后的引号,无法删除字符串中间的引号。
quote($string);
//给字符串添加引号,如果字符串中间有引号或空格时,需要用单引号或者双引号括起,否则编译时会报错。

字符串函数To-upper-case()和To-lower-case()

1
2
To-upper-case():将字符串的小写字母转换成大写字母
To-lower-case():将字符串的啊写字母转换成小写字母

数字函数

1
2
3
4
5
6
7
8
percentage($value):将一个不带单位的数转换成百分比值;
round($value):将数值四舍五入,转换成一个最接近的整数; 0.4999视为0
ceil($value):将大于自己的小数转换成下一位整数; 0.0001视为1
floor($value):将一个数去除他的小数部分; 0.0001视为0
abs($value):返回一个数的绝对值;
min($numbers…):找出几个数值之间的最小值;
max($numbers…):找出几个数值之间的最大值;
random(): 获取随机数

列表函数

列表函数主要包括一些对列表参数的函数使用,主要包括以下几种:

1
2
3
4
5
6
length($list):返回一个列表的长度值; //括号内的值算一个
nth($list, $n):返回一个列表中指定的某个标签值,$n表示第几个
join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
append($list1, $val, [$separator]):将某个值放在列表的最后;
zip($lists…):将几个列表结合成一个多维的列表;
index($list, $value):返回一个值在列表中的位置值。以1开始

Introspection函数

Introspection函数包括了几个判断型函数:

1
2
3
4
type-of($value):返回一个值的类型
unit($number):返回一个值的单位
unitless($number):判断一个值是否带有单位
comparable($number-1, $number-2):判断两个值是否可以做加、减和合并

sass Maps函数

借助于map功能,为同一量下,多个有名字的变量进行处理。

1
2
3
4
5
6
7
map-get($map,$key):根据给定的 key 值,返回 map 中相关的值。
map-merge($map1,$map2):将两个 map 合并成一个新的 map。
map-remove($map,$key):从 map 中删除一个 key,返回一个新 map。
map-keys($map):返回 map 中所有的 key。
map-values($map):返回 map 中所有的 value。
map-has-key($map,$key):根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false。
keywords($args):返回一个函数的参数,这个参数可以动态的设置 key 和 value。

sass的@规则

sass支持所有css3的@规则,以及一些sass专属的规则,也被成为指令。这些规则在sass 中具有不同的功效。

@import规则

sass扩展了css的@import规则,使其能够引入scss和sass文件。所有引入的scss文件和sass文件都会被合并输出一个单一的css文件。被导入的文件中所定义的变量或mixins都可以在主文件中使用。
sass会在当前目录下寻找其他sass文件,也可以通过:load_paths选项或在命令行中使用–load-path 选项来制定额外的搜索目录。
@import根据文件名引入。默认情况下,它会寻找sass文件并直接引入,但是在少数几种情况下,它会被编译成css的@import规则:

1
2
3
4
如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询(media queries)。

如果上述情况都没有出现,且扩展名是.sass或者是.scss,则该名称的sass
或scss文件就会被引入。

@media规则

sass中的@media规则和css中的使用规则类似,但它有另外一个功能,可以嵌套在css规则中。有点类似于JS中的冒泡功能一样。如果使用@media指令,他将冒泡到外面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.sidebar {
width: 300px;
@media screen and (orientation: landscape){
width: 500px;
}
}
//编译结果
.sidebar {
width: 300px;
@media screen and (orientation: landscape){
.sidebar{
width: 500px;
}
}
}

@extend规则

sass中的@extend是用来扩展选择器或占位符(类似于继承)

@at-root规则

@at-root规则从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用@at-root。

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
.a {
color: red;
.b {
color: orange;
.c {
color:yellow;
@at-root .d {
color: green;
}
}
}
}
//编译之后
.a {
color: red;
}
.a .b{
color: orange;
}
.a .b .c {
color:yellow;
}
.d {
color: green;
}

@debug规则

@debug在sass中是用来调试的,当你在sass的源码中使用了@debug规则之后,sass代码在编译出错时,在命令终端会输出你设置的提示bug:

1
2
3
@debug 10em + 12em;
//输出内容
Line 1 DEBUG: 22em;

@warn规则

@warn 和@debug 类似,用来帮助我们很好的调试sass。

@error

@error 和@debug、@warn 类似,用来帮助我们很好的调试sass。

文章目录
  1. 1. sass学习进阶
    1. 1.1. @if语句
    2. 1.2. for循环
    3. 1.3. @while循环
    4. 1.4. @each循环
  2. 2. sass函数
    1. 2.1. 字符串函数
    2. 2.2. 字符串函数To-upper-case()和To-lower-case()
    3. 2.3. 数字函数
    4. 2.4. 列表函数
    5. 2.5. Introspection函数
    6. 2.6. sass Maps函数
  3. 3. sass的@规则
    1. 3.1. @import规则
    2. 3.2. @media规则
    3. 3.3. @extend规则
    4. 3.4. @at-root规则
    5. 3.5. @debug规则
    6. 3.6. @warn规则
    7. 3.7. @error
|