Sass详解
之前学过less，但总感觉大型项目中sass用的更多一些，快学一下。不过好多内容sass和less都一样，但在这里还是详细列一下，方便查询~~
Sass和Less的区别
1 变量
语法：$变量名：样式值;
使用：$变量名;
注意点：
- 以
$开头，后跟变量名
- 多个单词，变量名以
-分割，如$theme-color
- 变量写在
#{}中以嵌入字符串
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$dark: #000;
$side: left;
.box1 {
color: $dark;
}
.box2 {
background: $dark;
border-#{$side}-radius: 5px;
}
--------------------------------------
.box1 {
color: #000;
}
.box2 {
background: #000;
border-left-radius: 5px;
}
|
2 嵌套
2.1 选择器嵌套
子元素在父元素样式的一对大括号内，如：ul { li { } }
语法
1
2
3
4
5
6
7
8
9
| 爷爷 {
爸爸 {
儿子 {
孙子 {
}
}
}
}
|
示例
1
2
3
4
5
6
| // html结构
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
</div>
|
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
|
.grandpa {
width: 200px;
height: 200px;
.father {
width: 100px;
height: 100px;
.son {
width: 50px;
height: 50px;
}
}
}
--------------------------------------
.grandpa {
width: 200px;
height: 200px;
}
.grandpa .father {
width: 100px;
height: 100px;
}
.grandpa .father .son {
width: 50px;
height: 50px;
}
|
2.2 伪类嵌套
从上面我们可以看出，选择器嵌套得出的css样式相当于后代选择器一样，中间都要一个空格分隔，那如果像给一个元素添加:hover要怎么做呢
语法：&:hover {}
示例
1
2
3
4
5
| // html结构
<div class="box">
<a href="javascript:;">hello</a>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.box {
a {
&:hover {
color: red;
}
}
}
--------------------------------------
.box a:hover {
color: red;
}
|
&表示直接调用夫选择器，拿上边的例子你可以把&理解为它是外面所有的父选择器，& => .box a
3 混合 mixin
mixin相当于已经定义好了一类样式，可以在任何地方重复的使用它，就跟js中的函数一样
语法1-不含参数
使用：@include name;
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@mixin box-style {
width: 200px;
height: 200px;
background: #000;
}
.box {
@include box-style;
border-radius: 5px;
}
--------------------------------------
.box {
width: 200px;
height: 200px;
background: #000;
border-radius: 5px;
}
|
语法2-含参数
1
2
3
| @mixin name ($param1，$param2， ...) {
css样式
}
|
使用：@include name(样式1，样式2，...);
注意：定义的时候参数要以$符开头，和变量命名是一样的
示例
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
|
$box-width: 200px;
$box-height: 200px;
@mixin box ($width, $height) {
width: $width;
height: $height;
}
.box {
@include box(200px, 200px);
@include box($box-width, $box-height);
}
--------------------------------------
.box {
width: 200px;
height: 200px;
}
|
4 继承 extend
如果一个元素的样式和另一个元素的样式完全一样，这个元素无需再写一遍重复的样式，只需要使用@extend 就可以把另一个元素的所有样式全部继承过来。
语法：@extend元素选择器
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.box1 {
width: 200px;
height: 200px;
}
.box2 {
@extend .box1;
}
--------------------------------------
.box1, .box2 {
width: 200px;
height: 200px;
}
|
不过继承要慎用，被继承相关的元素的样式也会继承过去，看下面的例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.box1 {
width: 200px;
height: 200px;
}
.box1 div {
width: 100px;
}
.box2 {
@extend .box1;
}
--------------------------------------
.box1, .box2 {
width: 200px;
height: 200px;
}
.box1 div, .box2 div {
width: 100px;
}
|
即继承元素的子元素也继承了被继承元素的子元素。如果不想与被继承元素的相关元素牵扯，还是注意选择器的书写。
5 导入 import
如果一个页面需要使用其他页面的样式，sass可以导入其他的scss文件，scss会把他们编译成一个css文件。
这样在开发中可以把一个页面的样式分割成多个scss文件，然后在页面的scss文件中导入其他scss，可以实现css的模块化开发。
语法： @import “文件名”
示例
1
2
3
4
5
6
7
8
9
10
11
12
|
div {
width: 200px;
}
@import "box1"
--------------------------------------
// 生成的css代码
div {
width: 200px;
}
|
6 注释
单行注释： // css文件里不会显示 压缩方式的css不会显示
多行注释：/**/css文件里会显示 压缩方式的css不会显示
强制注释：/*!*/ css文件里会显示 压缩方式的css会显示
7 数学运算
包含+、-、*、/（加减乘除）
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.box {
width: 50px + 50px;
height: 100px - 50px;
margin-top: 10px * 10;
padding-top: (100px / 2) ;
}
--------------------------------------
.box {
width: 100px;
height: 50px;
margin-top: 100px;
padding-top: 50px;
}
|
8 if条件语句
Sass可以根据条件判断给出特定的样式
语法
1
2
3
| @if 条件语句 {
} @ else if 条件语句 {
} @else
|
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.box {
@if 1+1 == 2 {
color: red;
} @else if 1+1 == 3 {
color: blud;
} @else {
color: pink;
}
}
--------------------------------------
.box {
color: red;
}
|
9 for循环
Sass也支持for循环，有两种语法
语法1
1
2
3
| @for $index from 开始值 through 结束值 {
}
|
示例
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
|
@for $i from 1 through 5 {
.col-#{$i} {
width: 50px * $i;
}
}
--------------------------------------
.col-1 {
width: 50px;
}
.col-2 {
width: 100px;
}
.col-3 {
width: 150px;
}
.col-4 {
width: 200px;
}
.col-5 {
width: 250px;
}
|
语法2
1
2
3
| @for $index from 开始值 to 结束值 {
}
从开始值开始，到结束值结束，不包含结束值 index表示 1， 2，...结束值-1
|
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
@for $i from 1 to 5 {
.col-#{$i} {
width: 50px * $i;
}
}
--------------------------------------
.col-1 {
width: 50px;
}
.col-2 {
width: 100px;
}
.col-3 {
width: 150px;
}
.col-4 {
width: 200px;
}
|
10 each循环
遍历一个列表，然后从列表中取出对应值。像border: 1px solied red； 1px solid red 这种用空格隔开的复合属性便是列表。
语法
1
2
| @each $index in $list {
}
|
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$icons: success fail warning;
@each $i in $icons {
.icon-#{$i} {
background-image: url(../images/icons/#{$icon}.png);
}
}
--------------------------------------
.icon-success {
background-image: url(../images/icons/success.png);
}
.icon-error {
background-image: url(../images/icons/error.png);
}
.icon-warning {
background-image: url(../images/icons/warning.png);
}
|
11 while循环
只要条件为真，就执行语句体
语法
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$index: 6;
@while $index> 0 {
.box-#{$index} {
width: 5px * $index;
}
$index: $index - 2;
}
--------------------------------------
.box-6 {
width: 30px;
}
.box-4 {
width: 20px;
}
.box-2 {
width: 10px;
}
|
12 用户自定义函数
语法
1
2
| @function name($param1，$param2，...) {
}
|
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$index: 6;
@function get-color($key) {
@if $key > 5 {
@return #000;
} @else {
@return #fff;
}
}
body {
background: get-color($index);
}
--------------------------------------
body {
background: #000;
}
|
