Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

——以上来自于官网说明

简单来说，Sass 就是一个css的预处理器，可以通过特定的语法进行样式的编写，然后将其编译成想对应的css文件。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

本文主要讲述Sass 入门的基本语法，以及在使用过程中遇到的问题与思考。

一、安装与使用

这个跳过不说，具体的安装与配置过程可参考Sass 的官网教程。

二、基本语法

1.变量

对于绝大部分的编程语言来说，变量是一个基础。Sass 也支持了变量的使用。

声明与调用

Scss 的变量是以’$’开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号（‘:’）分隔开，一般如下例所示：

在命名方面，值得注意的是：变量名中的中划线和下划线是等价的，用中划线声明的变量可以使用下划线的方式引用，反之亦然。

编译结果：

变量的作用域

变量是有全局和局部之分的，这个概念学过js的都会懂。下面说的是如何命名全局和局部的变量。下面给出一段代码以做演示。

编译结果：

有上面的代码可以看出，’global’可以使得在局部中命名全局变量。

变量的默认值

另外，Sass 的变量还有一个666的命令，就是’default’，该命令的使用如下例所示：

编译结果：

由上面代码可以看出，default可以使这变量作为一个默认值来使用，后期的重新命名可以在相应作用域中覆盖掉默认值。这对于模块化的开发是十分有用的，bootStrap4的模块化样式也是大量使用了这命令。

list变量和map变量

对于大部分的编程语言来说，这两个也是普遍的变量形式了，话不多说，直接上代码说明。

编译结果：

从上面可以看到，list变量和map变量和js中的列表和对象没什么太大的区别呢。

在变量名中使用变量值

这个概念感觉就和js里面的声明map变量差不多啊，具体的语法如下：

编译结果：

说完使用的语法了，接下去就说说我在变量的使用上遇到的坑。

最心累的就是是变量的命名。

统一命名的格式

统一变量命名的格式，是使用驼峰还是横杠或者是下划线衔接，应该是写代码之前就定好。

对于不同类型的变量，应该要在命名中有所体现，如’xxx-list’,’xxx-map’。个人认为，把变量值的内容类型体现在命名中更有利于代码的维护，如：’color-head’,’width-head’；另外，个人觉得’color-head’要比’head-color’要好，更容易分辨出变量说要描述的内容，维护起来比较方便。

变量名和值应该是分离的

避免直接使用有直接意义的变量名，例如’$blue’、’$green’、’$pink’，这种命名虽说能容易记忆，但是，如果当要把页面的蓝色全部调成绿色，这样的命名就尴尬了。

我想到的处理办法是，在有直接意义的变量外再嵌套多一层变量。如

酱紫，无论是要改相应色系的色调，还是把模块的色系直接换掉，都是只换一个变量值就可以实现的了，方便维护。

套用bootStrap4的Sass ，进行二次开发

Bootstrap4从less迁移到了Sass ，利用里面提供的Sass变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够方便快速的搭建起相应的页面出来。

 

下一篇：Sass学习笔记（二）函数