揭开Sass和Compass的神秘面纱

揭开Sass和Compass的神秘面纱

　　可能之前你像我一样，对Sass和Compass毫无所知，好一点儿的可能知道它们是用来作为CSS预处理的。那么，今天请跟我一起学习下Sass和Compass的一些基础知识，包括它们是什么、如何安装、为什么要使用、基础语法等一些基本知识。需要说明的是我也仅仅只是刚刚接触Sass和Compass，一些高级用法等将不再本文的讨论范围之内。接触一周以后发现Sass和Compass的用处非常大，也打算今后在项目中尝试引进并应用起来。希望读完以后，你跟我一样对Sass和Compass给你带来的东西非常开心，也跃跃欲试！好，废话不多说了，here we begin！

　　1、Sass和Compass是什么？

---

　　　在讲这个之前呢，先介绍下CSS。相信你跟我一样，经过若干段时间的开发后也比较熟悉CSS。但是有一点我们都很清楚，它是一种样式表，并不是一种编程语言。所以，有些童鞋经常说自己最近在学习CSS编程是错误滴。CSS里包含了很多选择器及应用的样式规则，而其中并不包含变量、函数、继承等这些我们在一般所有的编程语言里都有的规则。所以说，大家在写CSS和其它编程语言的时候是不一样的感觉。后来开发人员为了方便自己使用呢，向其中加了很多编程的思想，诸如之前我们提到的变量、函数、语句等这些东西，我们称之为预处理器。其中有很多优秀的比较常用的CSS预处理器，包括Sass、LESS、Stylus等。

　　那么回到话题上来，Sass是什么？Sass官方定义其为基于CSS的meta language。在我看来，其实Sass是CSS的一个超集，也是一个CSS开发工具。它丰富的语法知识使得CSS增加了诸多编程元素，这对开发人员来说简直不能再好。我们可以使用我们常用的编程思想去写Sass文件（即.scss文件）。补充一点的是，Sass是免费的，也不需要证书或授权什么的，任何人都可以用。

　　Compass是什么？官方对Compass的定义是，它是一个开源的CSS编码框架。换句话说，它是一个基于Sass的框架。在我理解来，Compass就像是sass的一个库函数或者框架，提供了非常多的Sass的优秀模块、函数等。你可以选择不使用它，但是使用它会为你编写Sass文件带来非常大的便利之处，例如一些重用的CSS模块、一些非常流行的CSS栅格布局框架、我们常用的reset/normalizing等。

　　Sass的官方地址：http://sass-lang.com/

　　Compass的官方地址：http://compass-style.org/  其对应的GitHub地址：https://github.com/Compass/compass

　　在继续之前呢，需要澄清的一点是，Sass和Compass不会帮你把CSS写的更好，它们只会给你在写CSS的时候很大的便利性，而真正最后CSS写出来效果如何还是看你自己对它们的掌握程度。就好像，虽然有很多优秀的JS库函数来给你调用一样，如果不掌握了解JS库函数，JS你一样写的稀烂。

　　2、Sass和Compass的下载与安装

---

　　在介绍下载与安装之前呢，想要说明的一点儿是Sass和Compass都是基于Ruby语言开发出来的。当然，如果你和我一样对Ruby一窍不通也没关系，因为懂得如何用它们跟它们是怎么开发出来的关系不大。所以，我们在安装Sass和Compass之前需要安装Ruby。好了，开始下载与安装。

　　Ruby的下载与安装：https://www.ruby-lang.org/en/downloads/。 下载下来后安装即可，由于非常简单过程不表。安装完后可以在命令行里输入以下命令来检查是否成功：

ruby -v // output ruby 1.9.3p551

　　那么现在来下载安装Sass和Compass。同样打开命令行，输入以下命令来分别安装Sass和Compass：

//for sass
gem install sass

//for compass
gem install compass

　　上面的命令需要解释的是gem。个人感觉gem就像Node里的NPM一样，包的管理工具。不知道理解正确与否。如果成功安装，那么你也可以通过检查对应的版本信息来看是否成功安装：

// for sass
sass -v     //Sass 3.4.13 (Selective Steve)

// for compass
compass -v   // Compass 1.0.3 (Polaris).......（其它一些版权信息等）

　　3、Sass的使用

---

　　Sass的使用非常方便，打开命令行窗口并切换到对应的工作目录下，假如当前目录有一个你写的scss文件(demo.scss)，那么输入以下命令：sass demo.scss命令行窗口就会显示出demo.css。如果想要将其保存到目录下，使用以下命令：sass demo.scss demo.css。sass的编译有四种不同的输出选项，分别为nested、expanded、compact、compressed。可能讲起来每种风格用语言形容不好理解，那么看一个例子就知道了。

　　sass代码：

#main {
    color: #999;
    .content {
        color: #bfbfbf;
    }
}

　　选择nested编译风格：

/* line 2, ../sass/demo.scss */
#main {
    color: #999; }
    / * line 4, ../sass/demo.scss */
    #main .content {
        color: #bfbfbf; }

　　compact风格：

/* line 2, ../sass/demo.scss */
#main { color: #999; }
/* line 4, ../sass/demo.scss */
#main .content { color: #bfbfbf; }

　　compressed风格：

#main{color:#999}#main .content{color:#bfbfbf}

　　expanded风格（默认）：

/* line 2, ../sass/demo.scss */
#main {
    color: #999;
}
/* line4, ../sass/demo.scss */
#main .content {
    color: #bfbfbf;
}

　　配置不同的参数，可以编译出不同风格的CSS。看个人喜好，就开发阶段而言，expanded感觉非常不错，发布的时候可以选择compressed。

　　4、Sass的基础语法（真正的干货）

---

　　①变量的声明与引用

　　声明变量非常简单，语法如下：

$varname: varvalue;

　　什么，看起来抽象，那么看个例子：

$highlight-color:#abcdef;

　　上面我们声明了一个变量highlight-color用$开头代表声明变量。其对应的值位于冒号之后。下面我们看看怎么用：

.danger-box:hover {
    background-color: $highlight-color;
}

　　完了，就这么简单。这里强调一点是，变量一般都声明在sass文件的头部，当然如果变量足够多，建议单独建个文件来保存变量（什么?更多的文件会增加http请求！呵呵，这个问题我们一会儿说）以便于维护。也许这个例子看起来不必要，因为为了一个颜色我们迂回了那么老半天，还不如自己直接写css一个值就够了。那么，如果你也这么想，那就图样图森破了。假使你的工程里有足够多的地方用到了这样一个颜色值，那么在一个地方定义变量后其它地方引用后是不是非常便于我们维护。试想如果我们改版样式，是不是就在一处改一下颜色值全工程使用到这个值的地方都改变了？！！！

　　②css嵌套选择器

　　看个例子来先：

#content article h1 { color:#333}
#content article p { margin-bottom:1.4em }
#content aside { background-color:#eee }

　　是不是非常眼熟，不出意外的话你的代码里也充斥着这样的代码，看看上面我们重复写的#content\article等。当然你会觉得这不多，醒醒吧，随便打开个真是的工程看看，重复量可是N级别的以至于你总是ctrl+c都觉得烦躁。那么何不把工作降低的简单点儿呢，看看sass语法中嵌套选择器怎么做的：

#content{
    article{
         h1  {color:#333}
         p   {margin-bottom:1.4em}
    }
    aside { background-color:#eee}
}

　　有没有发现，非常简洁！这有点儿像我们编程的时候不断地嵌套函数（有点儿编程的感觉了）。sass编译这个文件后将形成跟之前我们的那个css写出来的一模一样。编译器如此工作：它将子选择器追加在父选择器之后并应用对应的规则，如上例子h1追加在父选择器article之后再一起追加在article的父选择器之后，形成 #content article h1 {color: #333}。注意选择器之间的空格。

　　这里如果你足够机制的话，可能会想到引用一些伪类不就不可行了嘛！是的，所以sass提供了父选择器&。如下：

#content{
    &:hover {font-size: 20px;}
}

　　编译为css文件后如下：

#content:hover{
    font-size: 20px;
}  

　　③属性嵌套

　　继续看例子：

nav{
    border:{
        style:solid;
        width:1px;
        color:#ccc;
    }
}

　　编译为CSS文件后如下：

nav{
    border-style:solid;
    border-width:1px;
    border-color:#ccc;
}

　　Good!非常方便，以后不用再费劲的多些那么多code了。

　　④import文件

　　用过CSS的都知道，CSS文件允许我们引入其它css文件。但是呢，由于性能问题，很少人在正规发布的系统中这么干。因为虽然文件不大，但是它毕竟增加了http请求，每一次请求的建立和关闭势必将增加页面的堵塞加载时间。从而造成性能下降。看到这里应该明白了吧，上面我们提的那个问题。使用Sass引入文件不会增加过多的http请求，因为其最终编译后只会是将引入的文件都加载到被引入的文件中形成一个文件。这有非常大的好处，这样我们就可以将我们的css文件（确切的说是sass写的文件）也分模块管理。将变量定义的scss文件、关于布局的文件、关于reset的文件等等都放在不同的文件中，将来修改维护就会非常方便。

　　例如如下style.scss文件：

@import "compass";
@import "partials/variables";
@import "partials/mixins";
@import "partials/fonts";
@import "partials/normalize";
@import "partials/base";
@import "partials/placeholders";
@import "partials/layout";
@import "partials/modules";

　　上面文件引入了很多其它文件，其中文件名的默认格式.scss可省略。看到这儿，你可能会有疑问，这样不会增加sass文件编译为css文件的时间也造成浪费的css文件嘛！听我说，不会的，只要你把每一个文件定义为下划线加文件名即可。例如上面的mixins文件可定义为_mixins.scss。这样sass在编译的时候不会把它单独编译为一个css文件，明白它就是为了给别的文件引用的。注意，即是文件名定义有下划线引用的时候依然可以跟上面一样不用加下划线。

　　⑤注释

　　如果你学过JS，那么注释我就不用说了。sass文件注释支持js的两种注释，如下：

//这是一行注释
/*这又是一行注释*/

　　这里需要强调的是，当编译sass风格选为compressed后，注释会省略掉。但是，我们都知道，我们发布系统的时候，即使是在css里我们也希望留下我们的版权信息等。这个时候，可以使用sass使用的另一种注释风格：

/*! 这是注释，编译后不会消失*/

　　不管何种风格，这种注释永不会在css文件中被消失！

　　⑥mixins

　　sass支持一种非常方便的语法，即mixins。类似于定义变量，只不过定义了一块属性，如下定义了名为rounded-corners的mixins:

@mixin rounded-corners {
    -moz-border-radius:5px;
   -webkit-border-radius:5px;
    border-radius:5px;
}

　　这样当你使用到圆角的时候，可以如此使用：

.danger-box {
  color: red;
  @include rounded-corners;    //引用mixins
}

　　怎么样，是否觉得非常方便？！呵呵 还有更方便的呢！同样看上面的例子：

@mixin rounded-corners($rounded-size:default-size) {
    -moz-border-radius:$rounded-size;
   -webkit-border-radius:$rounded-size;
    border-radius:$rounded-size;
}

　　上面，我们增加了mixins使用时传入的参数，例如：

.danger-box{
    @include rounder-corners(5px)
}
.warning-box{
    @include rounder-corners(8px)
}

　　我们可以根据我们的不同需要传入不同的值。当然，你可以设置默认的default-size来确保即使不传值依然有一个默认的值。

　　⑦继承

　　还是看例子比较实在，如下，warning-box、success-box、info-box类都继承了box类的属性并且可以覆盖其属性：

// Box
.box {
    padding: 2em;
    color: $color10;
    background-color: $color11;
}
// Warning Box
 .warning-box {
    @extend .box;
    border: 2px dotted $color1;
}
// Success Box
.success-box {
    @extend .box;
    border: 2px dotted $color4;
}
// Information Box
 .info-box {
    @extend .box;
    border: 2px dotted $color7;
}

　　经编译后CSS文件如下所示：

.box, .warning-box, .success-box, .info-box {
    padding: 2em;
    color: black;
    background-color: white;
}
.warning-box {
    border: 2px dotted red;
}
.success-box {
    border: 2px dotted chartreuse;
}
.info-box {
    border: 2px dotted blue;
}

　　是不是有一种碉堡了的感觉！

　　5、compass的使用

---

　　讲完sass的使用和语法后我们来看看compass如何用？！

　　打开命令行窗口，输入：compass create myproject.即可初始化工程，其目录如下：

　　其中sass文件就是我们编写的sass文件，其编译后的css文件都会跑到stylesheets里。当然，你可以在config.rb中配置这些内容。你知道了，config.rb是compass的一些配置信息。

　　我想你和我一样，也不想每次写点sass代码就得到命令行窗口去手动执行编译命令，因此可以在当前工程下打开命令行窗口输入：compass watch即可。它会自动帮助我们把改动的文件编译为css文件。

　　6、compass的用处

---

　　下面我们看看我们都用compass干什么？

　　①reset或者叫normalize

　　我们都知道，浏览器给各HTML标签定义了一些默认的样式。我们为了使用这些标签，一般都会重置这些样式到最基本的或者我们熟悉的样式，我们称之为reset或者normalize。平时都是复制粘贴一大堆css的reset样式，这里我们只需要一行代码即可：

@import "compass/reset";

　　当然，这个是compass提供的一套reset代码。如果你不喜欢或者维护着自己的一套reset，你完全可以把它下载到你sass文件夹的partials目录里，并引进到你的sass文件中，例如我fork别人的normalize样式：https://github.com/front-thinking/normalize.scss。下载后在你的sass文件中同样一行即可：

@import "partials/normalize";

　　②css3模块

　　我们都知道，css3依然没有完全实行，因此其中的很多建议都只是各个浏览器在自己实现着，而为了标识个浏览器厂商，他们都在对应的属性前加了自己的前缀。这给写代码的人造成了很大的不便，每次为了兼容各个浏览器就要同样的规则写不同浏览器的实现，还得每条规则前加上他们的前缀。例如：

button,a.button{
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

　　但是，使用compass后我们可以这么来写：

@import"compass/css3";
.notice{
    @includeborder-radius(5px);
}

　　怎么样，非常方便吧？！！！

　　关于css3的很多新功能在compass中都有定义，你可以到官方文档处查看！

　　③栅格布局

　　compass提供了非常方便的栅格布局方式。我们都知道，如果不用第三方的css框架，我们实现自己的栅格布局的话就需要根据不同的columns数量来计算不同的宽度、间隙、padding等。这样我们很大部分的工作都浪费在这些无聊的计算当中了，使用compass后，我们只需要定义简单的一些变量就可以实现我们的栅格布局，而且不用自己去做这些繁琐的计算问题。compass提供了非常多的栅格布局的框架，如Blueprint\960.gs\susy等。你可以见到了解下这几个，根据个人的喜好来选择。

　　④spiting

　　我们都知道，为了减少http请求，我们都会将一些常用的ui组件放在一张大图里，然后设置不同的高度、宽度及间隔，然后在css中定义其规则。但是，这跟计算栅格布局的那些计算工作量一样，繁琐而无技术含量。使用compass，你可以大大省去这些时间来专心做你必要做的事情，而不必在这之上浪费生命。具体的使用方法，不再在这里写了，篇幅不够了。以后有时间单独开贴。

　　⑤其它

　　compass定义了非常多的常用的优秀的模块，也有很多社区维护的不错的插件，都可以唯你所用。

　　6、结束语

---

　　好了，断断续续俩仨小时码完了这些字。其中肯定有不少错误的地方，也烦请看到的童鞋指正一下，欢迎吐槽。

　　

---