sass和scss的区别：
实际上是同一种技术的不同叫法。
语法差异，scss是对sass的一种改进，他引入了更接近标准的css语法，更适合直接转换为css代码。
SASS
注释
sass中的多行注释（/**/）会显示在原文中，单行注释（//）不会限制在原文中
&父选择器
在嵌套css规则时，有时也需要直接使用嵌套外层的父选择器。
.container{font-size:14px;.header{width: 50%;height: 30px;.left{float: left;}&:hover{text-decoration: underline;color: #F00;}}.top{background-color: green;&-left{border: 1px #f2f2f2 solid;}}&::after{display: inline-block;}
}解析出来的css代码为：
.container {font-size: 14px;
}
.container .header {width: 50%;height: 30px;
}
.container .header .left {float: left;
}
.container .header:hover {text-decoration: underline;color: #F00;
}
.container .top {background-color: green;
}
.container .top-left {border: 1px #f2f2f2 solid;
}
.container::after {display: inline-block;
}/*# sourceMappingURL=css.css.map */%占位符选择器
它的目的是扩展其他选择器，html代码中并没有使用该类，以百分号开头。
变量
定义规则
- 变量以美元符号（$）开头，后面跟变量名
- 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）
- 写法同css，即变量名和值之间用冒号分隔
- 变量一定要先定义，后使用
导入
都将作为普通的css语句，不会导入任何Sass文件，有以下的导入方式：
- 文件拓展名是 .css
- 文件名以http://开头
- 文件名是url()
- @import包含media queries
@use使用
- @use引入同一个文件多次，不会重复引入，二@import会重复引用
- @use引入的文件都是一个模块，默认以文件名作为模块名，可通过as去别名
- @use引入多个文件时，每个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而@import变量会被覆盖
- @use可以通过@use 'xxx' as * 来取消命名空间，但是不建议这么做
- @use模块内可以通过$-或$_来定义私用成员，也就是所以这两个开头的不会被使用@use的模块引入
- @use模块内变量可以通过!default定义默认值，引入时可以通过with(…)的方式修改
- 可定义-index.scss或_index.scss来合并多个scss文件，他@use默认加载文件
@extend继承
.header{color: #fff;border: 1px solid #ccc;
}
.myBox{@extend .header;//将继承.header类的所有属性font-size: 22px;
}循环
- @for $i from <start> through <end> //包括end值
- @for $i from <start> to <end>//不包括end值
- @while循环，只要后面的条件为true就会执行，知道表达式值为false时停止循环
- @each $item in class1,class2 //$item就是遍历了in关键词后面的类名列
)
