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;
}
就可以写成
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 queries
6.混合指令
定义的时候先以@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站视频链接