侧边栏
初识SCSS
上一个项目是自己决定用Less来写css的，结果遇到了一个很纠结的问题，比如为了规范代码采用的是“一行一对属性:属性值”的格式，这就造成了整个项目有近几千行Less源码，后面修改的时候十分不方便，如果拆分成多个文件，引入文件路径又十分麻烦。
这时候同事就推荐了Sass，就这样入了另外一个坑。
在简单地查看了Sass语法之后，却生出了一种十分蛋疼的感觉，Sass采用了类似于python那样严格的缩进，甚至更为苛刻：
- 没有分号与大括号，采用严格的缩进；
- 使用两个空格的缩进来表示代码的嵌套；
- 也可以使用四个空格缩进，整个文件需要统一；
- 选择器的属性值与属性值之间需要一个空格；
之后为了减小学习成本，于是我就转向了scss。
scss貌似是在原生Sass的基础上转而采用类似与CSS的语法，使用大括号代替了缩进，与Less相似但是具有更多的功能，大致摸索了一下，于是整理了下面的一点笔记。
变量声明
scss
$base-color: #000;- 与Less中使用@来声明变量不一样，scss使用"$"符号来标识变量，因为"$"符号在CSS中并没有其他用途;
- 变量不区分"-"和"_"，采用这两种分隔符命名的变量会被认为是同一个变量。
计算
类似与Less，scss的属性值也是可以自动进行计算的，包括长宽，字体等，此外颜色还可以使用颜色函数进行调整。
选择器嵌套
scss
.wrap {
background: #ccc;
h1 {
color: red;
a {
text-decoration: none;
}
}
}- 与Less相同的嵌套规则，但是为了浏览器的解析效率，千万不要滥用嵌套；
- 多类选择器使用"&"符号，群组选择器也会被正确解析；
- 属性嵌套与选择器嵌套类似。
拆分并导入scss文件
可以将其他的scss文件引入到当前scss文件，即可以达到分模块编写css样式，然后统一编译为一个css文件中,甚至可以在多个项目中使用同个样式。 。 支持拆分文件是我使用scss最主要的原因，这个功能能够十分清楚明白地组织项目css文件结构。大赞!
scss
@import "styleGroup/_wrap.scss";- 可以省略后缀名".scss"或者".Sass"；
- 专门为import命令编写的scss文件，，可以在命名时以下划线开头，这样就不会在编译时生成单独的css文件；
- 由于默认后定义的变量会覆盖先前定义的变量，因此可以在定义变量的时候使用!default，如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
混合器
scss
@mixin border-default($width,$style,$color,$r) {
border: $width $style $color;
border-radius: $r;
}
.wrap {
@include border-default(1px,solid,#000,5px);
}- 如果是属性值需要重用则可以使用变量，如果是一大段样式需要重用则可以使用混合；
- 使用@minxin定义混合器，使用@include引用混合器
- 混合器的命名应当充分表现该样式的作用，避免滥用混合器造成样式表的臃肿
- 可以通过为混合器传参来建立不同的样式段代码
- 可以通过$name : $value的形式来传参，这样可以不用记住参数的顺序
- 可以为混合器参数设置默认值，即在设置参数时使用$name : $defaultValue形式
继承
选择器继承指的是一个选择器可以继承另一个选择器的所有样式
scss
@extends .wrap- 与混合器相比，继承生成的css代码相对更小
- 继承存在样式重叠的问题，浏览器根据选择器权重值进行判断
- 避免继承来自于后代选择器的样式，这样应用css规则的选择器情形无法判断
最后
刚开始学习Less的时候心里的那个关于选择器嵌套的疑惑算是解开了：跟使用的预编译器无关，选择器嵌套是完全由我们自己决定的，至于编译出来的N层嵌套，完全取决于我们在预编译的时候是否真正思考了嵌套的作用。
那么问题来了：到底该用什么姿势来书写正确的CSS代码呢？
你要请我喝一杯奶茶？
版权声明：自由转载-非商用-保持署名和原文链接。
本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。
