1.&字符
a{
color:#333
}
a：hover{
text-decoration:underline
color:#f00
}这一段代码用sass写可以写成这样
a{
color：#333；
&：hover{
text-decoration：nderline；
color：#f00
}
}&字符就是表达的是父级元素
或者再举一个例子，有两个部分都要.top
.container .top{
border:1px #f2f2f2 solid;
}
.container .top-left{
float:left;
width:200px
}就可以写成这样
.container{
.top{
border:1px #f2f2f2 solid;
&-left{
float：left；
width：200px；
}
}
}也可以这样嵌套的使用
2.同类属性嵌套
a{
color:#333;
font-size:14px;
font-famliy:san-serif:
font-weight:bold;
}就可以写成
扫描二维码关注公众号，回复：
14818602 查看本文章
a{
color：#333；
font:{
size：14px；
family：sans-serif；
weight：bold；
}
}3.变量的概念
这样写去创造对象
：root{
--color：#f00
}
body{
--border-color：#f2f2f2;
}有了之后就可以在需要使用的地方var一下
比如
p{
color:var(--color);
border-color:var(--border-color);
}这个p必须是在body里面，就是子调父那种感觉
- 变量要以美元符号$开头，后面跟变量名。
- 变量名是不以数字开头的可包含字母，数字，下滑线，横线（连接符）
- 写法同css：变量名和值之间用冒号分割
- 变量一定要先定义后使用
有全局变量和局部变量
全局变量可以用！global来表示，也可以直接放在最外面
主要支持六种数据类型
- 数字1,2,3,10px
- 字符串，有引号字符串，和无引号字符串"foo"，"bar"，baz
- 可以是颜色
- 布尔值
- 空null
- 数组
- maps，相当于object对象（key1：10）
在变量后面加上！defalt可以设置默认值，就像这样
$color:#666 !default但这个只有在没有定义的时候才会调用这个值
4.连接符
border-color和border_color是一个东西，还会存在覆盖
5.@import导入
在这里面有以下几种情况会被当成普通css引入，不会导入任何sass文件
@import “public.css” 文件扩展名是.css
@import "http://xxx.com/xxx" 文件名包含http：//开头
@import url(public) 文件名是url（）
@import ‘landscape’ screen and （xxx） 包含media queries6.混合指令
定义的时候先以@mixin加上名字
使用的时候用@include加上定义时候使用的名字
可以进行传参处理
比如传入一个叫aitem的值
@mixin flex-align（$aitem）{
-webkit-box-align:$aitem;
-webkit-align-items:$aitem;
-ms-flex-align:$aitem;
align-items:$aitem
}然后在调用的时候把参数传入
.container{
@includ flex-align(center)
}最后实际编译出来的结果就是这样
.container{
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center
}
甚至也可以进行多个参数的编译
像这样
//定义块元素内边距
@mixin block-padding（$top,$right,$bottom,$left）{
padding-top:$top;
padding-right:$right;
padding-bottom:$bottom;
padding-left:$left;
}
.container{
@include block-padding(10px,20px,30px,40px)
}
就很棒
随后，我们再在上面的（形参）加入一个默认值，像这样
@mixin block-padding（$top：0,$right：0,$bottom：0,$left：0）{
padding-top:$top;
padding-right:$right;
padding-bottom:$bottom;
padding-left:$left;
}这样就算下面调用的时候少了几个参数也不会出问题了。
总结
- mixin是可以重复使用的一组css声明
- mixin有助于减少重复代码，只需声明一次，就可在文件中引入
- 混合指令可以包含所有css规则，绝大部分sass规则，甚至通过参数功能引入变量，输出多样化的样式
- 使用参数时建议加上默认值
这个混入是什么时候使用呢？很多时候会使用，需要根据情况灵活操作的时候就可以使用混入了
7.sass继承指令
比如像这样的一段样式，在部分的后面加上@extend
.alert{
padding:15px;
}
.al-in{
@extend .alert;
border-color:#bce8f1;
}
.al-su{
@extend .alert;
border-color:"red"
}
这时候，这些代码会被解析成这样
.alert， .al-in， .al-su{
padding:15px;
}
.al-in{
border-color:#bce8f1;
}也可以使用混入，但是代码会变多
也就是说，这几个带extend的样式，都直接和继承的那个样式一起先渲染了，而后在对自己的单独样式进行渲染
8.操作符
关系操作符
< > <= >=
逻辑运算符
and or not
比如这边的not，就可以写成这样
@ if not ($list)
border-color: red;
}目前就这么多，下一期会附上b站视频链接