Sass笔记
变量
Sass可以让CSS也像程序语言一样拥有变量，可以把反复使用的CSS属性定义为变量，然后通过变量名来引用。
// Sass语法
$divHeight: 100px;
.div {
height: $divHeight;
}
// 编译后
.div {
height: 100px;
}
嵌套
我们平时在写CSS的过过程中，有时候要一层层写选择器，特别麻烦。
.div1 .div2 {
color: red;
}
.div1 .div3 {
color: green;
}
Sass可以很好的解决这个问题，而且让整个css看起来结构清晰。
// 编译前
.div1 {
.div2 {
color: red;
}
.div3 {
color: green;
}
}
// 编译后
.div1 .div2 {
color: red;
}
.div1 .div3 {
color: green;
}
选择器标识符
通过 sass的嵌套语法让我写代码的效率提高了很多，但是Sass嵌套遵循的是后台选择器的规则，当你处于某类{}里面时，自动识别为该类后代。如：
.div1 {
div2 {
color: red;
}
}
div2自动被识别为div1的后代。如果我们想给div1加一个:hover选择器：
// 编译前
.div1 {
:hover {
color: red;
}
}
// 编译后
.div1 :hover {
color: red;
}
我们发现，编译后确成了给 div1所有后代加:hover选择器。这时，我们可以使用 & 父选择器的标识符。
.div1 {
&:hover {
color: red;
}
}
// 编译后
.div1:hover {
color: red;
}
选择器
统计选择器 ~, 相邻选择器 +。
.div1 {
~ div {color: red};
> div2 {color:green};
}
// 编译后
.div1 ~ .div {
color: red;
}
.div1 > .div2 {
color: green;
}
导入
在Sass中，你能使用@import来导入其他的CSS文件，与传统css中的@import不同的是，在Sass中生成css文件时就把相关文件导入，而不是执行到@import才导入。利用这个规则，我们可以将在多个页面共有的css代码提取出来，然后导入对应的css文件。
image.png
当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass使用在文件名前加下划线 _name 来命名这些文件。
混合器
混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字， 通过@include在样式中使用，这样你就可以轻易地通过引用这个名字重用这段样式。
@mixin name {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
// 编译前---------------------------------
.div {
width: 100px;
height: 100px;
@include name;
}
// 编译后---------------------------------
.div {
width: 100px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
给混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。
@mixin name($width, $radiu) {
width: $width
border-radius: $radiu;
}
// 编译前
div {
@include name(100px, 5px);
}
// 编译后
div {
width: 100px;
border-radius: 5px;
}
