使用变量

$声明的变量是有块级作用域的

Sass的变量名可以与css中的属性名和选择器名称相同

中划线或下划线这两种用法相互兼容

嵌套css规则

Sass会把父选择器放在子选择器前面,形成一条一条规则(但是这样的方案,根据css样式从右到左解析来说,效率不太好)

Sass也有@import的功能,但是Sass是在Sass文件编译成css文件的时候就已经导入了,而且导入的文件是全局变量都可以使用

可以在选择器里面嵌套导入

注释

单行编译时注释会被忽略,多行不会。

混合器

判断一组代码是否可以组成一个混合器,一条经验法则就是你能否为这个混合器相处一个好名字

css类是对于html当中语义化的功能模块的描述,而混合器是对于css中最终呈现的样式效果的描述

混合器可以和函数一样传递参数,并且做一系列的分支循环判断

混合器的实参的表示可以是这样的,不用考虑顺序的影响:

1
2
3
4
5
6
7
8
9
10
11
12
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}

也可以这样展示默认的参数:

1
2
3
4
5
6
7
8
9
10
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}

继承


example :
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
.error {
border : 1px red;
background : #fdd;
}
.error a {
list-style-type: none;
}
h1.error {
color : red;
}
.seriousError {
@extend .error;
border-width : 3px;
}
======>
.error, .seriousError {
border: 1px red;
background: #fdd; }
.error a, .seriousError a {
list-style-type: none; }
h1.error, h1.seriousError {
color: red; }
.seriousError {
border-width: 3px; }

从上面就可以看出extand是怎么运行的,这时候就需要考虑如果前后样式冲突的时候怎么判断权重

继承的使用场景

你发现你的某个类(比如说.seriousError)另一个类(比如说.error)的细化。你会怎么做?

  1. 可以为这两个类分别写相同的样式,但是如果有大量的重复怎么办?使用sass时提倡的就是不要做重复的工作。
  2. 可以使用一个选择器组(比如说.error.seriousError)给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方,这种做法很好,但是如果是分散在样式表的不同地方呢?再这样做就困难多了。
  3. 你可以使用一个混合器为这两个类提供相同的样式,但当.error的样式修饰遍布样式表中各处时,这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的 样式。你应该更清晰地表达这种关系。
  4. 综上所述应该使用@extend。让.seriousError从.error继承样式,使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error``.seriousError都会继承其中的样式。

继承的工作细节

  1. 继承重复的是选择器,但是混合器重复的是属性,继承的代码量更少一点
  2. 就是我上面说的继承之后可能要是会有冲突,看权重就好了

使用时注意的

继承中不要使用后代选择器