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关键词后面的类名列
