sass的使用
减少重复的工作
1.变量的声明:
是以$开头给变量命名;
$height-color: #F30
2.变量的使用范围:
变量可以在多个地方存在，不一定限制在代码块中。但是如果定义在了代码块中，则只能在代码块中使用。
先在外面或者上面给属性命名，在使用的地方应用这些变量。
3.变量的命名:
命名：以下划线或者横杠都看自己的意愿，中划线更普遍。（大部分下划线和横杠是互通的，但是类名和ID名不一定。
4.sass的嵌套使用:
sass的嵌套：支持多层嵌套，避免重复书写相同的类名或者ID名。
注意:
父选择器标识符:&
1.连接伪元素:
&会直接被父级元素替换
article a {
color: blue;
:hover { color: red }
}
=>artical a {color:blue}
artical a :hover{color:red}
artical a{
color:blue;
&:hover{color:red}
}
如果使用伪元素需要用&来连接，不然就直接识别成后代元素，会和父元素有一个空格导致样式与预期不符。
2.群组选择器的嵌套
将重复的元素提出来:
.container{
h1,h2,h3{margin-bottom:10px}
}
=>
.container h1, .catainer h2, .container h3{margin-bottom:10px}
3.组合选择器>,+,~
1.>:选中元素的直接子元素(只有一个元素)
2.+:选中同层相邻元素(所有+后面相同的元素)
3.~:选中所有在~前相同层级的~后的元素
5.嵌套属性
nav{
border:{
style:solid;
width:1px;
color:#ccc
}
}
=>
nav{
border-style:solid;
border-width:1px;
border-color:#ccc;
}
6.导入sass文件
1.@import
css中也有该规则,但是只有执行到@import时才会去下载导入的css文件;加载过慢
sass无需发起额外的下载请求;@import时就解析成了css;
color.scss => @import "color"
注意:可以省略后缀名
2.使用部分sass文件
如果以下划线开头命名则不会单独编译输出css
3.默认变量
!default
4.注意
如果以css结尾
导入的是一个URL地址
导入的是url()
=>生成的文件是直接被浏览器解析了的，可能会造成额外下载
6.注释
静默注释：//
不会暴露在浏览器中
普通注释：/* */
7.混合器
1.使用场景：
1.有大段样式代码需要重复使用=>将重复代码抽离出来成一个逻辑单元
2.能用通用的名字将这个混合器的功能描述出来；（语义化）
`rounded-corners
2.标识符：
@mixin @include
3.使用方法：
//相当于将这个样式封装起来了
@mixin rounded-centers{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
//使用这个样式
notice{
background-color:green;
border:2px solid #ccc;
@include round-center
}
4.规则
1.如果混合器通过@include包含在父规则中时，会生成嵌套规则
2.可以使用&
5.给混合器传参
类似于function
@mixin link-colors($normal, $hover, $visited){
color:$normar;
&:hover{color:$hover}
&:visited{color:$visited}
}
a{
@include(red,blue,green)
}
a{
@include link-colors($normal:red,$hover:blue,$visited:green)
}
6.默认参数值
声明：$name:default-value
8.选择器继承
1.定义：选择器可以继承为另一个选择器的所有样式
2.语法：@extend
.error{
border:1px solid red;
background-color:#fdd;
}
.seriousError{
@extend .error;
border-width:3px;
}
后写的属性样式可以覆盖先写的；
3.继承何时选择
当一个元素拥有的类是属于另一个类时
继承比起混合器生成的代码更少，有利提高站点速度
当不同的规则被应用到同一个元素上时，先看选择器的权重，如果权重相同则后面的覆盖前面的
避免多后代时应用继承选择器.foo .bar{@extend .error}