CSS预处理器是一种语言用来为CSS增加一些编程的的特性，无需考虑浏览器的兼 容性问题，例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语 言中的一些基本技巧，可以让你的CSS更加简洁，适应性更强，代码更直观等诸 多好处。
预处理框架版本：
sass:(有两个版本sass和scss，scss是sass3引入的新语法)
less:
stylus:
sass的安装
使用npm i sass -g进行安装
//有了全局的sass 环境以后
//我们就可以对sass 的文件进行编译了
//sass的文件后缀有两种，-种是.sass - 种是.scss
//他们两个的区别就是有没有{}和;
//.scss文件
h1 {
width: 108px;
height: 200px;
}
//.sass文件
h1
width: 100px
height: 200px
//我们比较常用的还是.scss 文件
通过指令把.sass/.scss文件变成.css文件
sass ***.sass ***.css
但是这样会有缺陷。我们每一次改动都要去重新运行
所以我们可以设置一个实时监控。
#实时监控sass文件，只要发生改变就会同步到绑定的事件中
sass --watch ***.sass:***.css
上面的那个我们只能监听一个文件，但是在实际开发中我们往往会有很多文件放在一个文件夹里面，我们可以给文件夹设置一个实时监控。
sass --watch sass:css
//这里的sass和css分别代表.sass和.css文件的父级文件夹
一个vscode插件可以实现监控的功能：
sass的相关语法
1、定义变量
上面定义的变量全局都可以使用
我们也可以在规则块内定义私有量
2、sass的嵌套写法，
2.1、嵌套中的&，我们需要给该标签设置一个鼠标移入事件，这个时候就要用到&了
3、群组嵌套：多个同级标签同时被嵌套
div {
width: 100px;
.box1, .box2， .box3 {
color: red;
}
}
//编译结果
div {
width: 100px;
}
div .box1, div .box2, div .box3 {
color: red ;
}
还有多个标签同时嵌套一个标签
h1, h2, h3 {
width: 100px;
.box {
color: red;
}
}
//编译结果
h1, h2, h3 {
width: 100px;
}
h1.box, h2 .box, h3 .box {
color: red;
}
4、混合器
其实就是定义一个”函数” 在scss文件中使用
语法：
//定义一个混合器使用@mixin 关键字
@mixin radius {
-webkit- border-radius: 10px;
-moz - border-radius: 10px;
-ms - border-radius: 10px;
-0- border-radius: 10px ;
border-radius: 10px;
}
||
||
||
//上面是定义好的一个混合器
//他是不会被编译的，只有当你使用了他以后，才会被编译
//使用混合器使用@include关键字
div {
width: 100px;
height: 100px;
@include radius;
}
||
||
||
//编译结果
div {
width: 100px;
height: 100px;
-webkit- border-radius: 10px;
- moz - border-radius: 10px;
-ms- border-radius: 10px;
-0- border-radius: 10px;
border-radius: 10px;
}
//我们既然说了,混合器就像一个“函数” - -样,那么就-定可以像“函数” - 样传递参数
//和“函数” 的使用方式一样,在定时的时候是"形参”，在调用的时候是 “实参"
//定义混合器
@mixin my_ transition($pro, $dur, $delay, $tim) {
-webkit -transition: $pro $dur $delay $tim;
-moz-transition: $pro $dur $delay $tim;
-ms-transition: $pro $dur $delay $tim;
-o-transition: $pro $dur $delay $tim;
transition: $pro $dur $delay $tim;
}
//使用这个混合器的时候传递“实参”
div {
width: 100px;
height: 100px;
@include my_ transition(all, 1s， 0s, linear);
}
//编译结果
div {
width: 100px;
height: 100px;
-Webkit -transition: all 1s 0s linear;
-moz -transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
//写了多少个"形参” ，那么调用的时候就要传递多少个“实参”
//我们在定义混合器的时候，也可以给一-些参数写- -些默认值
//这样一来,就可以不传递“实参”、 了
//设置一些带有默认值的参数
@mixin my_ transition($dur: 1s, $pro: all, $delay: 0s， $tim: linear) {
-webkit -transition: $dur $pro $delay $tim;
-moz-transition: $dur $pro $delay $tim;
-ms -transition: $dur $pro $delay $tim;
-o-transition: $dur $pro $delay $tim;
transition: $dur $pro $delay $tim;
}
//使用的时候，如果你不传递，那么就是使用默认值
div {
width: 100px;
height: 100px;
//使用的时候，只传递一个， 剩下的使用默认值
@include my_ transition(2s);
}
编译结果
div {
width: 100px;
height: 100px;
-Webkit-transition: 2s all 0s linear;
-moz-transition: 2s all 0s linear;
-ms-transition: 2s all 0s linear;
-o-transition: 2s all 0s linear;
transition: 2s all 0s linear ;
}
5、继承
在 sass 里面使用继承可以大大的提高开发效率。
其实继承很简单，就是把之前写过的选择器里面的内容直接拿过来一份。
div {
width: 100px;
height: 100px;
background-color: pink;
}
P{
@extend div;
font-size: 20px;
color: red;
}
编译结果
div, P {
width: 100px;
height: 100px;
background-color: pink;
}
p{
font-size: 20px;
color: red;
}
6、注释
1、编译的时候不会被编译
//我是一个普通注释，在编译的时候，我就被过滤了
2、会被一起编译
/*我在编译的时候，会被一起编译过去*/
3、强力注释：会被编译，压缩的时候也会存在
/*!我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在*/
7、导入文件
我们刚才知道了定义变量,定义混合器
而这两个内容在定义过以后，如果没有使用，是不会被编译出内容的
所以我们可以把变量单独写一个文件, 混合器单独写一个文件, 然后直接导入使用
定义一个混合器文件
//我是variable. scss
$w: 100px;
$h: 200px;
$c: pink;
//我是mixin. scss
@mixin my_ transition($dur: 1s, $pro: all, $delay: 0s，$tim: linear) {
-webkit -transition: $dur $pro $delay $tim;
-moz -transition: $dur $pro $delay $tim;
-ms -transition: $dur $pro $delay $tim;
-o-transition: $dur $pro $delay $tim;
transition: $dur $pro $delay $tim;
}
@mixin radius {
-webkit -border-radius: 10px;
- moz - border-radius: 10px;
-ms - border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
定义一个普通sass文件引入上面的混合器文件
//我是index. scss
@import' . /variable.scss';
@import ' . /mixin.scss';
div {
width: $w;
height: $h;
background-color: $c;
@inc1ude radius;
}
h1 {
@include my_ transition;
}
8、条件语句
@if
当@if的表达式返回值不是false 或者null 时，条件成立，输出{}内的代码: .
P{
@if 1 + 1 ==2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译为
P{
border: 1px solid;
}
@if声明后面可以跟多个@else if 声明，或者一个@else声明。
$type: monster;
P{
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
|}
编译为
p{
color: green;
}
9、循环@for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。
@for $i from 1 through 3 {
item-#{$i} { width: 2em * $i; }
}
//编译为
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }
