Sass浅谈

对于一名前端开发来说，CSS并不陌生，几乎每天都在和CSS打交道。相处久了就会觉得CSS有些许的机械化，有些许的无趣；就会觉得写CSS很多时候都是在做一些复制粘贴性的工作，布局排版，颜色设置，边框属性，宽高取值，布局制作等等；就会觉得JQ之类的比CSS用起来顺手多了，可以设置变量、可以书写循环、可以不再机械性的写重复的代码·······

终于有一天让我遇到了Sass，让我可以用另一种方式来完成我的工作，让我不再是一个复制代码的码农，让我不再机械的进行工作，让我可以像写JQ一样为自己的样式文件设置变量书写循环，让我更有激情的完成更具意义的工作。

言归正传，开始谈下Sass。Sass是一种基于CSS的预处理语言，在CSS的基础上将代码抽象和简单化。简单的理解，Sass分为两种语法，一种是SCSS，另一种就是SASS。因为新的语法SCSS和平时使用CSS的习惯基本上一致，无须为了使用SCSS而改变以前的书写代码习惯，使得众多前端人员习喜欢使用并广为传播发扬光大（如无特别说明，本文所指的都是SCSS）。

真正的在项目中运用Sass，需要在电脑中构建好Sass的环境，包括安装Ruby环境、安装Sass、调试Sass以及编译Sass。

接着就是语法，仅Sass的语法外表看，和CSS可以说是基本一致。但若想真正的运用Sass，懂得运用CSS远远不够，首先需要熟悉Sass的基本特征：

1.    变量：用来定义变量，项目中属性值需要改变时只需改变变量值即可，不用再一个个的去改属性值。

2.    嵌套：样式和属性的嵌套，增加样式代码的可读性

3.    Mixins：抽取样式定义为模块，封装好的模块可以拿来像函数那样调用，可以运用到多个页面和项目，为代码的简洁和减少冗余提供了必要的条件。

4.    选择器继承：继承选择样式

Sass为写CSS提供更多的自由，像编程语言一样，可以给你的样式定义变量，构建嵌套、增加条件判断，建立循环、赋予CSS以逻辑功能。

比如，Sass可以将颜色设置为变量，并在整个项目中重复使用他们，轻松实现多个色调的构建。复杂一点的，你可以通过Sass的mixins生成一个网格的布局功能，然后在对应的类名通过include来调用，生成所需要的网格布局。另外还可以通过extend来调用你的前面生成的类名。

诚然，具有编程特性，极大的减少CSS代码的重复性与代码的冗余，方便维护，适应性更强，可读性更强这些都是Sass的优势。当然，优势不是说出来的，而是在代码中体验出来的。下面就选一些代码来体现这些优势：

首先是16分栏布局的（图1-1是Sass，图1-2是编译出来的CSS）：

图1-1

图1-2

接着是拼合背景图片的（图2-1是Sass，图2-2是编译出来的CSS）：

图2-1

图2-2

优势不言自明，看到这里估计很多前端人员都已经跃跃欲试，想在项目中运用Sass了。鉴于国内很多团队花大力气推广Sass却以流产告终，在此不得不再唠叨几句：

Sass是需要学习成本的，一个对Sass不了解或者对项目Sass库不了解的人是不能轻易去动Sass文件的，这是牵一发而动全身的，影响的可能不止一两个文件，也不止一两个项目。对项目做一个合理的规划，不要所有的sass一锅煮。指定一个拍板规划的人，避免团队合作中出现文件乱套的现象。