Sass和Compass的安装和使用方法.docVIP

Sass和Compass的安装和使用方法 支持LESS、SASS/SCSS,代码智能提示和css规则的浏览器支持提示,保存即编译,生成对应的*.css、*.css.map，下面我们来看一篇Sass和Compass的安装和使用方法 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的官方地址：/ Compass的官方地址：/ GitHub地址：/Compass/compass 在继续之前呢，需要澄清的一点是，Sass和Compass不会帮你把CSS写的更好，它们只会给你在写CSS的时候很大的便利性，而真正最后 CSS写出来效果如何还是看你自己对它们的掌握程度。就好像虽然有很多优秀的JS库函数来给你调用一样，如果不掌握了解JS库函数，JS你一样写的稀烂。 Sass和Compass的下载与安装 在介绍下载与安装之前呢，想要说明的一点儿是Sass和Compass都是基于Ruby语言开发出来的。当然如果你和我一样对Ruby一窍不通 也没关系，因为懂得如何用它们跟它们是怎么开发出来的关系不大。所以我们在安装Sass和Compass之前需要安装Ruby。好了开始下载与安装。 Ruby的下载与安装：/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).......（其它一些版权信息等） 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 {