标签：
SASS的出现让CSS变得更加有意思。至于SASS是什么？就不在做更多的阐述，因为她并不是一个新鲜的产物，现在在互联网上可谓是铺天盖地。如果你实在想知道SASS是什么？那你只要简单得知道他是CSS预处理器语言的一种。
SASS在CSS的基础上做了一些扩展，使用SASS你可以使用一些简单的编程思想进来编写CSS。比如，SASS中可以定义变量、混合、嵌套以及函数等功能。只不过SASS不像CSS，可以直接运用到项目中，如果你需要将样式运用到项目中，有一个步骤是必须经过的——SASS转译成CSS。
到目前为止，将SASS转译成CSS并不是件困难的事情。可以通过命令行工具或者第三方插件来完成SASS向CSS的转译工作，并且转译出来的CSS代码，格式优美，且符合CSS的标准。
SASS发展到今天，变化非常大，功能也非常强。同时他的语法也有所改变。直到写这篇文章之时，SASS具有两种语法。新的主要语法（SASS 3）称作SCSS (Sassy CSS)，同时支持CSS3的语法。也就是说只要CSS3支持的在SCSS中也被支持。SCSS文件扩展名为‘.scss‘，这也是当下使用最多的。
第二种语法是SASS的老语法，也就是SASS。不过这种语法和新的SASS语法——SCSS和CSS语法都略有不同。(为了区别，以后文中出新的SCSS指的是SASS的新语法，文中出现的SASS都是指SASS的老语法)。SASS也被称为缩进语法，主要依靠代码缩进来指定块，而不是使用括号和分号。如此一来，SASS也就是一种严格型语法，任何的缩进和字符错误都会造成样式的编译错误，因此使用SASS需要具备良好的编码习惯与风格。SASS文件扩展名为.sass。
SASS虽然有两种语法，但老语法同样还被继承下来，能正常使用。但在下更建议大家使用SASS时直接使用最新的语法SCSS。因为SCSS和CSS的编码风格和语法几乎可以说是一样，这样一来有助于大家更好的学习和使用SASS。
SASS的代码无法直接运用到项目中，要像使用CSS一样，我们就必须将SASS转译成CSS，然后在项目中调用转译出来的CSS。然而转译SASS就需要有一定的生产环境配合，才能完成。这也是玩SASS必须做的第一步。
由于SASS是在Ruby环境下运行，所以大家首先需要在自己的工作电脑上安装Ruby。具体如何安装，此处不做过多的介绍，如果您需要安装的话，可以参阅下面的教程：
在Mac系统下，Ruby一般已内置在其中，如果您不能确认是否已安装，或者说你不知道你的Ruby使用的版本，你可以打开你的命令工具：
$ ruby -v
这样你就能获得相关信息：
#ruby 1.9.3p392(2013-02-22 revision 39386) [x86_64-darwin12.4.0]
注： 上面信息是我电脑中显示的信息。或许在你的电脑中显示的信息将会略有不同。
如果您的系统是Windows，那么下载Ruby的一个安装文件，step by step就搞定了。
确认运行SASS环境无误之后，我们就可以开始安装SASS了。SASS的安装也可以根据您自己的不同的需求进行不同的安装，其根据用户需求分成三大类安装方法。
在大多数情况和大部分人群中，还是喜欢安装SASS的标准稳定版本，这样使用在项目中风险不会太大，其安装很简单：
$ gem install sass
有的时候在Linux和OS X系统下，可能需要超级管理员权限才能安装：
$ sudo gem install sass
安装完成后，可以通过下面的命令查看SASS是否安装成功：
$ gem list
如果您在这份list中，看到SASS的存在：
…
sass (3.2.9)
…
说明您已安装成功。这个时候你或能不知道SASS版本是多少，你也可以查看他的版本：
$ sass -v
可以看到SASS版本信息：
Sass 3.2.9 (Media Mark)
对于SASS的发烧友来说，一个稳定版本并不能满足需求，他需要一些别的东西，也就是说他想获取SASS的一些最新变化和最新功能。那么这个时候你就可以安装一个Beat版本的SASS，他会自己会自动创建每次更改的主分支：
$ gem install sass --pre
SASS也可以直接从Git库中安装：
$ git clone git://github.com/nex3/sass.git
$ cd sass
$ rake install
从实际使用的角度来说，建议按第一种方法安装。Windows系统下安装SASS，可以点击这里。
使用SASS制作东西时，我们可以借助一些成熟型的SASS库，帮助我们快速开发，提高效率。目前比较成熟的SASS库有Compass和Bourbon。接下来，简单看看这两个库怎么来安装。
Compass是一个非常成熟的SASS库，可是一个很强大的框架，使用的频率也相当的高。如果您了解了Compass，那么他将会让你受益无穷。同样的，在你的项目中使用Compass，需要先安装Compass。
$ gem install compass
通过上面一行简单的命令你就完成了对Compass的安装，你在gem对应的清单中就能看到compass的存在：
$ gem list
显示结果：
…
compass (0.12.2)
…
Bourbon的盘安装和Compass库的安装非常的类似，也非常简单，只需要通过gem命令在你的命令终端运行下面的命令：
$ gem install bourbon
具备了上面的知识后，我们开始来实践自己的第一个SASS项目，在这里也将分成三个部分来介绍。
所谓的“干净的SASS”项目指的就是不使用其他任何SASS库，简单点说，就是项目先在SASS中开发，然后转译成CSS。我们来看看这样的项目是如何创建的。
首先进入到你本地项目目录下，我的一般放在Sites中，如下所示：
$ cd Sites
这个时候就进入了项目目库中：
/Users/airen/Sites
例如我们要创建一个项目，其名称叫作“mySass”：
$ mkdir mySass
此时mySass这个项目就在/Users/airen/Sites中了，要是你不放心，你可以使用ls命令查验一下：
$ ls
为了让项目规化的更完美一些，我把.scss的SASS文件都放在sass目录中，而需要转译出来的.css文件都将放在css目录中。因此，我们还需要在mySass项目中创建sass和css两个文件夹：
$ cd mySass
$ mkdir sass
$ mkdir css
接下来打开你的编辑器，新建一个文件，并且在里面编辑一段简单的SASS代码，如下所示：
$main-color: #ce4dd6; $style: solid; .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: 1px $style; } }
并且将此文件命名为style.scss保存在mySass/sass下。
上面简单的介绍了一个净身的SASS项目，简单就不用说了。接下来我们一起看看如何通过Compass来创建一个SASS项目。
同样打开你的命令终端，并且进入到Sites目录下。例如我们要创建一个compassSass的项目放在Sites目录下，我们就可以这样做：
$ compass create compassSass
这句命令一完，你的终端中会出现很多信息，首先会告诉你创建了一个compassSass项目，并且自动在这个项目中创建了哪些文件：
+compassSass
|--+sass
|-----screen.scss
|-----print.scss
|-----ie.scss
|--+stylesheets
|-----ie.css
|-----print.css
|-----screen.css
|---config.rb
除了创建了相关文件之外，还会告诉你一些其他的信息。其中有一个config.rb文件非常重要，其主要是用来配置Compass创建的项目运行环境。所以在修改这个配置文件的时候，大家需要小心处理。
# Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
这样你就可以在sass目录中创建你需要的.scss文件，你也可以直接在screen.scss文件中编辑SASS代码。例如此处，将上例中style.scss的SASS代码放置在screen.scss中。
/* Welcome to Compass. * In this file you should write your main styles. (or centralize your imports) * Import this file using the following HTML or equivalent: * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ @import "compass/reset"; $main-color: #ce4dd6; $style: solid; .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: 1px $style; } }
在Compass创建的项目中，会自动通过@import导入样式
@import "compass/reset";
另外，如果你不想使用SCSS，只想着旧人，不爱新欢，那么你可以在后面添加一个参数-x sass：
$ compass create compassSass -x sass
Bourbon创建SASS项目和前者都略有不同。他创建SASS项目的思路是，先在对应的目录下创建好项目，然后在把bourbon导入到对应的项目中。
例如此处我们创建了一个bourbonSass项目，同样将此项目放置在Sites目录下，那么我们可以这样来操作：
$ cd ~/Sites
$ mkdir bourbonSass
$ cd bourbonSass
接下为需要做的是将bourbon库插入到bourbonSass库中：
$ bourbon install
这样一来，bourbon库自动会在你的项目bourbonSass中插入一个文件目录bourbon，在这个目录中放置了bourbon库的一些变量。建议大家在使用的时候不要轻意去修改bourbon目录中的变量文件，因为这样你可以随时的更新这个库：
$ bourbon update
为了能更好的管理您自己的SASS文件以及转译出来的CSS文件，我建议您在bourbonSass项目中在创建sass和css目录，用来放置您自己的.scss文件，以及转译出来的.css文件：
$ mkdir sass
$ mkdir css
这个时候，你就可以在sass目录中创建一个你自己需要的.scss文件，比如screen.scss。
这样一来，你就可以直接引用bourbon中的一些变量：
@import "bourbon/_bourbon.scss";
你要是不想引用bourbon库中的变量文件，你也可以将自己的SASS样式写到这个文件中。
@import "bourbon/_bourbon.scss"; $main-color: #ce4dd6; $style: solid; .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: 1px $style; } }
上面花了点篇幅，大家知道了如何创建一个SASS的项目，而且项目中都建立了自己需要的.scss文件。可是大家都懂的，SASS只能在Ruby下运行，无法直接引用到项目中，所以要使用SASS给大家带来便利的开发，就必须知道如何将.scss文件转译成.css文件。
接下来，我们依旧针对前面三种方法，对应的了解一下，如何将.scss转译成.css。
首先来看第一种，我把这种转译方法称为普通转译方法，也是就要针对没有嵌入任何第三方SASS库创建的项目。
转译.scss文件，我们主要使用的是sass命令。其操作非常简单，首先进入到对应的项目中，比如这里，先要进入mySass项目中：
$ cd ~/Sites/mySass
然后输入转译命令：
$ sass sass/style.scss css/style.css
这样一来，我们把sass/style.scss转译出来的style.css放入了css目录之下。为以验证，我们有没有转译成功，我们可以进入css目录，查看有没有style.css样式文件，并且查看转译出来的css样式：
$ vi css/style.css
注：我们当前所在的位置是Sites/mySass下。
转译出来的CSS样式为：
.navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; } a:hover { border-bottom: 1px solid; }
使用sass转译.scss文件，有一个不足之处，就是我们修改了.scss文件，不会自动转译。这样一来，我们要时时查看转译出来的CSS样式就非常的蛋疼。那么有没有一个比较好的方法吗？有的，我们只需要在sass命令的基础上添加一个参数--watch就可以。
为了验证这样的说法，我们先把刚才转译出来的style.css删除，然后通过sass --watch命令重新转译一回：
$ sass --watch sass/style.scss
这样一来，你可以看到提示：
>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite sass/style.css
sass/style.scss转译到sass/style.css下，并没有转到css目录中，这是他不足的一处。转译出来的在不在css目录下，我想你并不会太在意（大不了到时copy一下），而关心的是，他是不是如前面所说的，可以时间监控转译.scss文件。为了验证这个功能是有效的，我们来修改一下style.scss文件：
$main-color: #ce4dd6; $style: solid; $font-size: 2em;//新增加的sass样式代码 .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; font-size: $font-size;//新增加的sass样式代码 &:hover { border-bottom: 1px $style; } }
此时我们，不在命令终端敲转译命令了，如果你没有忘记的话，刚才我们开启了时时监控功能，我们来先看一下命令终端的变化吧：
>>> Sass is watching for changes. Press Ctrl-C to stop.
overwrite sass/style.css
>>> Change detected to: /Users/airen/Sites/mySass/sass/style.scss
overwrite sass/style.css
明显看出终端的变化，那么看看style.css是否有变化：
.navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; font-size: 2em;/*转译出来的新样式代码*/ } a:hover { border-bottom: 1px solid; }
我想不用我说了吧，事实证明一切。这个时候如果你想停止这样的时时监控转译，你只需要在命令终端输入Ctrl -C即可。
虽然sass和sass --watch都达到我们转译.scss文件功能，但在实际项目中，我们的项目中不可能只存有一个.scss文件。所以我们需要一种方法，可以同时将多个.scss文件转译成.css文件。其实在SASS中，可以直接将整个目录中的所有.scss文件转译成所有的.css文件，并放到另一个CSS目录中，其命令如下所示：
$ sass --watch sass/:css/
这样一来，只要是sass中所有的.scss文件都可以转译成.css文件，并且都放在了css目录中。
特别强调：如果使用sass --watch转译.scss样式，首先需要安装rb-fsevent，如果没有安装就执行sass --watch将无法执行时时监控.scss转译成.css。例如，在没有安装rb-fsevent时执行下面的转译命令：
$ sass --watch test.scss:test.css
命令终端将会提出报警信息：
>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite test.css Missing dependency ‘rb-fsevent‘ (version ‘~> 0.9‘)! Please run the following to satisfy the dependency: gem install --version ‘~> 0.9‘ rb-fsevent For a better performance, it‘s recommended that you satisfy the missing dependency. Listen will be polling changes. Learn more at https://github.com/guard/listen#polling-fallback.
为了能让sass --watch命令运行正常，也就是时时能监控，只需要安装rb-fsevent即可:
$ gem install --version `~>0.9` rb-fsevent
这个时候将在执行：
$ sass --watch test.scss:test.css
不会出现任何问题。
Compass库创建的SASS项目与没有用任何SASS库创建的SASS项目略有不同，那么其转译SASS的方法也是有所不同。接下来我们一起来看看Compass创建的SASS项目应该如何转译。
Compass库创建的SASS项目，转译方法并不复杂。首先我们需要先进入Compass库创建的项目内，例如我们此例，先进入compassSass项目：
$ cd ~/Sites/compassSass
然后通过下面命令可以将项目中sass目录下所有的.scss文件转译成.css文件，并放置在stylesheets目录下：
$ compass watch
此时命令终端，会显示转译的相关信息：
>>> Change detected at 23:35:12 to: screen.scss overwrite stylesheets/screen.css >>> Compass is watching for changes. Press Ctrl-C to Stop.
同样，如果你想停止sass目录下的.scss文件时时转译，只需要在终端中输入Ctrl -C即可。
转译出来的样式如下：
/* line 11, ../sass/screen.scss */ .navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } /* line 18, ../sass/screen.scss */ a { color: #ce4dd6; } /* line 20, ../sass/screen.scss */ a:hover { border-bottom: 1px solid; }
如果你修改了screen.scss中的样式，会自动转译出相应的样式：
$main-color: #ce4dd6; $style: solid; $font-size: 2em;//添加的scss样式 .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; font-size: $font-size;//添加scss样式 &:hover { border-bottom: 1px $style; } }
当你保存了修改的screen.scss文件后，命令终端会自动监控到，并做出相应的变化：
>>> Change detected at 23:45:35 to: screen.scss
overwrite stylesheets/screen.css
同时转译出来的样式也会做相应的变化：
/* line 12, ../sass/screen.scss */ .navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } /* line 19, ../sass/screen.scss*/ a { color: #ce4dd6; font-size: 2em;/*转译后样式*/ } /* line 22, ../sass/screen.scss */ a:hover { border-bottom: 1px solid; }
而使用bourbon库创建的SASS项目，将.scss样式转译成.css样式，和普通SASS项目转译样式的方法一致。
既然.scss能通过sass命令转译成.css样式，那么我们是否可以将.css转译成.scss呢？事实是可以的，我们可以通过sass-convert命令：
$ sass-convert css/style.css style.scss
sass-convert除了可以将.css样式转译成.scss文件之外，还可以通过这个命令对.sass和.scss之间样式转译。
通过sass命令，我们可以完成.scss和.css之间转译，为了能更好的了解sass命令，大家需要对sass命令做一个全面的了解，如果你对sass命令并不熟悉，可以在命令终端输入：
$ sass -help
这样就会列出所有sass命令所有参数的使用规则。
sass命令语法非常简单：
sass [options] [input] [output]
sass命令主要功能是将scss或者sass文件转译成css文件。
sass命令中的[options]参数就要包括：
-s, --stdin Read input from standard input instead of an input file
--trace Show a full traceback on error
--unix-newlines Use Unix-style newlines in written files.
--scss Use the CSS-superset SCSS syntax.
--watch Watch files or directories for changes.
The location of the generated CSS can be set using a colon:
sass --watch input.sass:output.css
sass --watch input-dir:output-dir
--update Compile files or directories to CSS.
Locations are set like --watch.
--stop-on-error If a file fails to compile, exit immediately.
Only meaningful for --watch and --update.
--poll Check for file changes manually, rather than relying on the OS.
Only meaningful for --watch.
-f, --force Recompile all Sass files, even if the CSS file is newer.
Only meaningful for --update.
-c, --check Just check syntax, don‘t evaluate.
-t, --style NAME Output style. Can be nested (default), compact, compressed, or expanded.
--precision NUMBER_OF_DIGITS How many digits of precision to use when outputting decimal numbers. Defaults to 3.
-q, --quiet Silence warnings and status messages during compilation.
--compass Make Compass imports available and load project configuration.
-g, --debug-info Emit extra information in the generated CSS that can be used by the FireSass Firebug plugin.
-l, --line-numbers Emit comments in the generated CSS indicating the corresponding source line.
--line-comments
-i, --interactive Run an interactive SassScript shell.
-I, --load-path PATH Add a sass import path.
-r, --require LIB Require a Ruby library before running Sass.
--cache-location PATH The path to put cached Sass files. Defaults to .sass-cache.
-C, --no-cache Don‘t cache to sassc files.
-E encoding Specify the default encoding for Sass files.
-?, -h, --help Show this message
-v, --version Print version
除了使用sass命令来转译SASS文件之外，还可以借助第三方工具完成，目前世面上较为流行的转译工具主要有：
Compass.app
Scout
Codekit
Koala
本文主要介绍了SASS在实际使用中如何配置SASS环境以及SASS文件的转译方式。完成了使用SASS编译项目的第一步。具备这些基础知识之后，我们就可以深入学习SASS的基本知识。并且深入的学习SASS和使用SASS来制作自己喜欢的项目。希望这篇文章对大家学习和运用SASS有所帮助。如果您有更好见解和学习方法，欢迎在下面的评论中积极讨论。(^_^)
如需转载，烦请注明出处：http://www.w3cplus.com/preprocessor/sass-compile.html
标签：
原文地址：http://www.cnblogs.com/whitelist/p/4703225.html
