一、scss的几个主要特点
1.变量
如何在scss中定义变量、使用变量？
例（1）：
定义变量 $color:pink
使用变量 div{
background-color:$color
}
在定义变量的时候变量名必须以$开头。
为什么要使用变量？
代码可维护性高、方便统一管理
2、嵌套
所谓嵌套就是父级选择器里可以套后代选择器
例（2）：
html代码：
<div>
<p>我是p标签</p>
</div>
scss代码：
div{
width:100px;
height:100px;
p {
font-size:20px;
}
}
不要怀疑，就是这么简单easy !
3、scss里的 & 符号
正常情况下嵌套选择器的时候会这样：
见例（2）scss代码 进行预处理之后 会生成这样的代码： div{} , div p{}
注意div跟p中间的空格，有时候我们并不希望出现这个空格，比如在使用 :hover的时候，这个时候你就可以在冒号前面加上&。
说白了，&=父元素 ，前面都是废话，这句才是重点！
4、 混合器（mixin）
解决scss冗余代码的神器！
mixin 类似于 javaScript 里面的函数，作用就是 定义一个代码块 然后这段代码可以重复被调用。
例（3）
@mixin radius($angle:50% ) {
border-radius:$angle;
}
这样就申明了一个mixin 代码块，你需要就直接调用 比如 div{ @include radius },这个div就会变成圆角，当然你可以继续将有用的重复的代码放进来，在不同的地方直接调用即可，这样即简化了代码，维护的时候又方便，有没有爽的一匹？， 还有，上面的代码进行了传参，还使用了默认值哦！。
注意的地方是 形参也是一个变量所以前面也要加$, 我就犯过这样的错！
默认值，就是在形参后面跟冒号加默认值，如果你在调用的时候没传参数，他就会使用你设置的默认值。
先暂时就写这么多，后续再补充，自己也在学习当中，大家一起进步！
网友评论