我们项目中怎么使用SCSS

下图是前端CSS预处理语言截止到2017/3/18在GitHub上的星星数，虽然SCSS不是最多的，但是它一定是最丰富的预处理语言，后续将继续分享其他预处理语言。

综上可以看出：目前最火的CSS预处理语言是less，postcss潜力最大，sass最完善，stylus也不错。

一、下载及安装

方式一：先下载ruby，然后基于ruby安装sass，webstrom绑定监听即可。

方式二：先下载node.js，然后下载gulp/grunt，最后安装SCSS，这个不用webstrom绑定监听。

二、实用语法

首先要说一下，SASS和SCSS是一样的，只是SCSS是SASS的3.0引入的语法而已。

1.嵌套 (合理嵌套，从祖先元素到当前元素的层层嵌套，可能导致文件体积及复杂度剧增)

scss的嵌套 编译后的css

PS：支持“&”父元素选择器嵌套，支持属性嵌套；@at-root3.3.0推出的新功能，跳出嵌套。

2.变量----使用“$”定义

a. SCSS支持变量作用域和字符串中嵌套变量，具体说明看下图：

全部变量使用及字符串变量嵌套

b.变量作用域

局部变量只能在“{}”内部有效，！global可以将局部变量转换成全局变量（sass3.2.0推出功能）；若定义变量为默认值，在其后加上“!default”

变量作用域

PS:一般变量使用“$”，字符串嵌套变量使用#｛｝。

3.混合(Mixin)

使用很简单，使用@mixin定义，@include引用。

a.混合的初级应用----定义和调用

混合的初级应用

b.混合的中级应用----变量初始化及赋值

变量初始化及赋值

c.混合的高级应用----无参及多参数

无参数和多参数

4.继承----使用“@extend”

一般继承class，编译以后，css中该class也会出现，如果你不想让公共的class在css中出现，可以使用“%”占位符选择器。

一般继承和占位符继承

5.函数及运算

这里以颜色函数及@each为例，其他很多函数自己可以去看看官网，不然一篇文根本写不完。

a.将颜色变深变浅，颜色加减等。

颜色变浅变深及颜色加减

b. @each

这个函数很不错，可以让你对多个背景图一次书写完成，但是需要注意的是对应class的名字要取的和“in”后面的数组一致，且顺序不能乱。

循环背景图

6.注释、@import、编译风格

a.注释

/* */css中显示，//css中不显示，/*重要注释!*/压缩不会被删掉。

b. @import

该标签可引入sass、scss、css文件，如果将一个scss另一个又不想立马被编译成css的话，可写成

@import “_mixin.scss“。

c. 4种编译风格

*nested：嵌套缩进的css代码，它是默认值。

*expanded：没有缩进的、扩展的css代码。

*compact：简洁格式的css代码。

*compressed：压缩后的css代码。

命令行：

sass --style compressed test.sass test.css

三、我是怎么在项目中使用SASS的

1.适当CSS RESET

SASS有reset模块，但是因为我们的项目不是所有的reset样式都用，所以我们一般适当选择一部分reset。（考虑文章问题，将样式都写成了一行，项目中不建议这样写）

根据项目需求适当reset

2.定义公共变量

根据需要定义使用到的变量，以便引用，公共变量命名需便于理解且不重复。

定义公共变量

3.项目中使用部分展示

是不是觉得SASS也不难吧！下篇将和大家一起学习LESS使用。