sass、css预处理器
001：css : 艺术品
 |
但是没法用它编程
CSS基本上是设计师的工具，不是程序员的工具。
在程序员眼里，CSS是一件很麻烦的东西。
它没有变量，也没有条件语句，只是一行行单纯的描述
|
002：css:预处理器
 |
专门的编程语言（ 为CSS增加了一些编程的特性） ------> 编译 ------> css文件
Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等
|
003：sass
 |
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
|
004：sass和scss( 本是同根生，相煎何太急 )
 |
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，
|
区别：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
005编译sass：
命令行编译\软件方式编译 - koala\编辑器插件
006 vsCode插件
安装 essy sass插件
配置：
"easysass.compileAfterSave": true,
"easysass.excludeRegex": "",
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "" //路径
编译风格：
nested：嵌套缩进的 css 代码。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码。
开启sass之旅
1：变量
定义：
$color:red;
$left:left
使用：
div{
background:$color;
border-#{$left}:10px solid $color; 变量和字符串的拼接
}
注：支持块级作用域。如果想把一个变量转为全局变量 $height:300px!global
2：运算
+, -, *, /, %
margin: (10px*3);
top: 50px + 100px;
border-radius:$v1/$v2; 两个变量则会发生运算 需要用#{变量}
3:嵌套
选择符的嵌套
属性的嵌套属性后面 ： 两侧有空格
&引用父级
4：注释
//
/**/
/*！ */
后面两种会被解析在css里面
5：代码的重用继承
.class1{
width:200px;
height:300px;
}
.class2{
@extend.class1;
background: #d00
}
编译后
.class1, .class2 {
width: 200px;
height: 300px;
}
.class2 {
background: #d00;
}
6：mixin
1:定义代码块 @minxin定义 @include调用
2：mixin可以传递参数
7：@import
@import "demo2.scss";
@import "demo3.css";
8：判断
$f:10;
@if($f > 10){
.box{
width:300px;
height:300px;
background: red;
}
}@else{
.box{
width:2200px;
height:300px;
background: red;
}
}
9：循环
@for $i from 1 to 10
@for $i from 1 to 10{
.box#{$i}{
transform:rotateX($i * 30deg);
}
}
@each $i in 1,2,3,4,5 {
.box#{$i}{
border:$i 10px solid;
}
}
10：函数
