LibSass 是Sass引擎的c语言部分。
基于LibSass，sass.js是一个纯粹的用js扩展的Sass引擎。它可以使我们能够用JavaScript编写Sass代码并运行Sass。
sass-node是基于NodeJs的解释器，可以让我们在node环境中编译sass。
sass的安装
sass是用ruby写的，所以需要我们先安装ruby。
代码语言：javascript复制sudo apt-get install ruby-full
然后我们安装sass
代码语言：javascript复制gem install sass
安装过程如下：
image.png
我们可以查看一下版本
代码语言：javascript复制 sass -v
还可以查看相关的使用帮助：
代码语言：javascript复制 sass -h
Compass
Compass是一个开源的框架。可以帮助我们用sass编写重用性和扩展性高的CSS代码。同时也可以补充代码的前缀，使我们的代码有更好的兼容性。
安装Compass：
代码语言：javascript复制gem install compass
完成之后，我们可以创建一个项目。
代码语言：javascript复制compass create project
项目结构如下：
config.rb文件包含了该项目的配置。
代码语言：javascript复制require 'compass/import-once/activate'
# 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文件编译为css文件。
代码语言：javascript复制compass compile
sass 交互模式
执行下面的命令进入交互模式
代码语言：javascript复制sass --interactive
同时，内置的函数也会进行计算
scss 可以转换为 sass
我们都写过sass代码。其实scss更新，更加类似css语法。他们两者之有些差异。
代码语言：javascript复制sass-convert test.scss test.sass
test.scss
代码语言：javascript复制/*Sassy CSS（SCSS）语法*/
p {
color: red;
}
test.sass
代码语言：javascript复制/*缩进语法*/
p
color: red
看到两者之间的差别了吗？
目前，有两种可用的语法：
- 原始的缩进语法，大多数称为Sass，
- 以及较新的Sassy CSS（SCSS）语法，它是CSS3的扩展。
编译的时候，编译器通过识别后缀选择用那种语法进行编译。
选择输出格式
当我们把sass编译成css时，我们可以选择输出的格式。
- expanded
- nested
- compacted
- compressed
默认是nested。
简单看个例子：
test.scss
代码语言：javascript复制$base-color:blue;
$link-color:orange;
$hover-color:red;
p{
color:$base-color;
a {
color: $link-color;
&:hover{
color: $hover-color;
}
}
}
选择expanded格式：
代码语言：javascript复制sass --style expanded test.scss
如下：
选择nested格式：
代码语言：javascript复制sass --style nested test.scss
选择compacted格式：
代码语言：javascript复制sass --style compacted test.scss
选择compressed格式：
代码语言：javascript复制sass --style compressed test.scss
使用 partials
当我们项目代码逐渐多起来的时候，我们不可能把所有的代码都放到一个文件里。我们会选择一些代码拆分的方法。
partials 是一些特殊的scss文件，可以导入到项目里，但是自身又不会编译到css中。
举个例子，有如下文件：
_grid.scss
代码语言：javascript复制.row{
width: 100%;
}
main.scss
代码语言：javascript复制@import 'layouts/_grid.scss';
// scss-lint:disabled PlaceholderExtend
section.custom {
@extend .row;
}
编译后结果
代码语言：javascript复制/* line 1, ../sass/layouts/_grid.scss */
.row, section.custom {
width: 100%;
}
grid.scss并没有编译到css 中。
原因
带有下划线的scss文件通常叫做partials，它们不会被编译到css中去，但是它们可以导入到其他文件中。
这个方法对于我们编写重用行高的代码非常有效。同时也可以用来做代码拆分。
需要注意的一点是，导入的import写法不带ur。
正确
代码语言：javascript复制@import 'layouts/_grid.scss';错误
代码语言：javascript复制@import url('layouts/_grid.scss');
