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等。