Sass学习

预处理器Sass的功能

Variable

用$variable语法表示一个变量，一般在文件顶部定义并存放一个数值或颜色值。

Nesting

通过indent/tab嵌套多种选择器实现父子样式继承。

Partials

Partials就是文件名以下划线开头的SCSS文件，类似_patrial.css。Partials一般不直接被预处理器编译为css，而是被import到主要的scss文件后，与主文件一同被编译。

Import

使用@import语法把所有Partials文件导入主文件。

Mixins

使用@mixin语法包裹可多次重复利用的代码块，一般结合Varibales一起使用，实现一个基本的传参函数。

Extend

使用@extend语法实现样式的继承与自定义，适用情况类似于要设计一组颜色各异的button，extend来的是通用button样式，而extend语法本身的样式明确各个颜色。

Operators

在scss文件中使用基本数学运算。

终端使用sass命令compile文件

基本步骤与命令

新建一个.scss文件，例如名为style.scss，编辑内容并储存。

在终端先进入该.scss文件所在文件夹，然后执行sass style.scss:style.css。冒号后面的内容就是输出文件名。

执行完成后当前列表新增除了.scss文件以外的三个文件，分别是a source map(.css.map)，a regular .css file，a sass.cache directory.

修饰命令

如果需要实时对.scss文件的修改同步编译到.css文件，可以使用sass —watch命令。

压缩.css文件，使输出的css文件能够更快加载。--style compressed命令。

如何组织一个SCSS项目

sass主文件夹下有：

• base文件夹，用于存放全局varibales以及mixins，文件名都是以下划线开头的Partials。
• components文件夹，用于存放依据组件需求生成的样式表，文件名都是以下划线开头的Partials。
• main.scss文件，用于将所有子文件夹中的partials都import

最后sass命令编译的对象是整个main.scss文件。输出到与sass文件夹同层级的css文件夹下的.css文件即可。