什么是Scss

Sass(Syntactically Awesome Style Sheets) ,是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升 CSS. 它有很多很好的特性，但是它有类似 Ruby 的语法，没有花括号，没有分号，遵循严格的缩进

它在书写规则，变量命名方面和 CSS 代码有着很大的区别。于是，后来官方在 2010 年推出了一个全新的语法，叫做 SCSS, 意思是 Sassy CSS. 这个语法带来了对 CSS 友好的语法，试图弥合 Sass 和 CSS 之间的差别.

嵌套

可以把子元素放入父元素里面

变量

在 CSS 文件中，我们经常会用到颜色 color， 可能好几个元素的 CSS 样式都会用到同样的一种颜色，因为网站往往是一个统一的风格。 这样，我们如果一旦要更改这个颜色，我们就要更改整个 css 文件中的所有地方。而变量解决了这个问题，我们可以把一个颜色值赋给一个变量，所有用到这个颜色的地方，都用这个变量替代。这样，需要更改颜色时，只需要修改这个变量的值就可以了. 当然，CSS 中的宽度，长度等也可以类似这样，使用统一的变量来进行.

3. 局部

Sass 可以通过使用局部系统来把样式表分成多份文件，根据不同的需求组织不同部分的样式表，形成不同的 css 文件

比如，把页眉样式写在页眉样式表中，类似的有 页脚样式表，导航样式表,按钮样式表....我们公司在开发多个项目时，都采用了这种方法，形成多个 scss 文件，比如有

colours.scss, typography.scss, layout.scss, footer.scss, header.scss, navigation.scss, blocks.scss, forms.scss, slider.scss, buttons.scss, margins.scss,icons.scss, tables.scss..

@import命令也可以用于在 html 文件中导入外部的 css 文件

import 规则一定要先于除了 @charset 的其他任何 CSS 规则

使用@import 命令进行媒体查询

媒体查询是 CSS3 中出现的新特征，在 css 中使用 media 关键字来指定, 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式范围的表达式组成，比如宽度，高度和颜色。 它允许内容的呈现针对一个特定范围的输出设备进行裁剪，而不必改变内容本身.

混合宏

使用 Sass 的一个很大的特性是，混合宏. 混合宏是很小的代码片段(类似局部), 使用@mixin 标志来标识 你可以在文件中的任何部分，使用@include 标志来复用这个混合宏.

混合宏结合变量使用，是个很普遍的例子, 最常见的例子就是创建圆角按钮. 创建一段实现圆角代码的混合宏，用传入的变量来代替圆角值, 这样，可以根据传入变量值不同，实现不同的圆角按钮

公司项目中，前端 css 文件我们都是写 SCSS 文件,然后通过@import 导入到 style.scss 文件中，最后通过 gulp 来生成 style.css 文件