关于CSS预处理工具SASS

        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; }