从野路子来谈Sass预处理器的简单使用

作为一名前端工作者对于CSS必然非常熟悉，基本上整天与他们打交道，但是传统的CSS书写繁琐，复用性差，可以看下对比图（点击放大观看）。



左侧是传统CSS写法，右边是Sass，Sass的逻辑结构更简洁明了，通过嵌套可以直观的看出属性所属关系，而且Sass可以定义变量做到属性的复用，并且可以做属性的计算等等，后面我们会详细说。

准备工作

正常来说使用Sass是需要安装Ruby的，但是为了快速应用到项目中去，我们另辟蹊径去掉繁琐的安装方法，适当来一些“野路子”，首先是前端开发IDE，这里我们使用开源的brackets，他不仅开源，颜值也高，插件多（据不完全统计，brackets的插件有1299个之多），而且支持实时预览。



点击插件管理器，将下载的扩展包拖至下图位置





安装完毕我们就可以使用Sass了，新建立一个Scss，这里我们需要说明下，刚才讲的是Sass为什么这里又讲Scss了呢？因为Sass书写格式很严格，例如嵌套需要回车并且空格两个，对于之前写惯了传统CSS的同学们很不适应，所以从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的CSS代码，这一代的Sass也被称为Scss

书接上文，建立一个叫style.scss文件，brackets会自动创建style.css和style.css.map文件，style.css.map我们不多表，单说style.css，正常页面中引用css引用这个就可以，不需要引用scss，如下图：

这样就完成了样式表的引用，我们在修改样式表的时候需要在scss文件中修改，保存后css文件自动同步不用我们干涉。

Sass的神奇之处

之一，Sass可以使用变量，定义常用的属性，方便重复调用，定义必须用$定义，如下：

之二，Sass可以使用公式计算，如下：



之三，Sass可以嵌套，这个功能是让我们爱上他的功能之一，使得结构清晰明了，如下：

传统我们书写css是这样的



使用Sass嵌套以后是这样的



伪类也可以嵌套，如下：



Sass中书写如下



之四，Scss的引用，Scss中我们可以将css按照功能模块划分为N个Scss，通过@import命令来引用，如下：

在引用相同文件类型的时候，也就是引用scss的时候，只需要输入文件名就可以，不需要输入后缀名，而引用其他文件的时候需要加入后缀名，如css，在创建功能样式表的时候为了避免生成多余的css和css.map文件，我们可以在文件名前面加入下划线，这样就可以了。

以上只是列举了Sass众多功能中的4个，相信已经会极大的方便我们日常工作了，Sass还有例如：颜色函数、代码继承、自定义代码、条件判断、循环、Mixin重用代码块等等功能。