Scss快速上手：减少80%重复的样式代码！

朱雀 2022-10-08 12:23 226阅读 0赞

> Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能
> 
> 在学习成熟的项目时，看到了十分规整的scss代码（以及一堆看不懂的语法），加上之前对sass/scss的好奇，不妨借此机会系统整理总结学习一下。

（部分内容参考[sass官方文档][sass]）

## 1、变量$ ##

在代码中最常见到首部的变量声明

$color-button:#3ecacb; .button{ 
    	color:$color-button;
    }

*tip：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明*

## 2、嵌套及父选择器& ##

*  嵌套规则：允许父选择器嵌套子选择器，故可以用html的嵌套思路来写css。
 *  属性嵌套：属性也可以进行嵌套， 如：font-、border- 。
 *  父选择器&：在子选择器中直接使用外层的父选择器， 如：添加伪类 &:hover\{ \}。
 *  &-复合选择器：&作为选择器第一个字符，可以生成复合选择器。 如\#button\{ &-primary\{\} \}。

## 3、@mixin、@include混合样式及其参数Arguments ##

@mixin ：定义混合样式

@include ：复用混合样式

参数形如：@mixin sexy-border($color, $width)

(类似函数，参数要按照变量形式,前面加$)

tips：

*  1.可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器
 *  2.混合样式中也可以包含其他混合样式。(究极套娃，项目中见到了)
 *  3.混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。（项目中看到也有使用父选择器的。。）
 *  4.参数还可以预定义，类似es6中的参数设置默认值！

（这两个标签也是之前最令我疑惑的点，在读项目代码的过程中发现了大量的混合样式，在实际开发中可以增加样式代码复用率。）

## 4、@extend 继承 ##

*  一个选择器可以继承另一个选择器的全部样式
 *  继承可以传递
 *  don‘t repeat urself
 *  与mixin类似，提高复用率，但不能携带参数。

## 5、@import 引入 ##

*  SASS能够将代码分割为多个片段，并以underscore风格的下划线作为其命名前缀（\_partial.scss），SASS会通过这些下划线来辨别哪些文件是SASS片段，并且不让片段内容直接生成为CSS文件，从而只是在使用@import指令的位置被导入。
    
    （1）Css中的@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
    
    （2）Scss中的@import规则，不同的是，scss的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求

## 6、上手使用 ##

vscode 安装scss+easy sass两个插件，保存scss文件时自动编译.css文件。

从现在开启css精简代码之旅！

[sass]: https://www.sass.hk/docs/