SASS学习笔记1 —— 安装、编译和调试

一、什么是SASS

SASS是一种"CSS预处理器"（css preprocessor）的开发工具，为CSS加入编程元素，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

二、安装和使用

2.1 安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。先导官网下载个ruby

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

SASS学习笔记1 —— 安装、编译和调试

sass安装

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

SASS学习笔记1 —— 安装、编译和调试

然后直接在命令行中输入 gem install sass

如果要安装beta版本的，可以在命令行中输入

gem install sass --pre

你还可以从sass的Git repository来安装，git的命令行为

git clone git://github.com/nex3/sass.git
cd sass
rake install

升级sass版本的命令行为 gem update sass

查看sass版本的命令行为 sass -v

你也可以运行帮助命令行来查看你需要的命令 sass -h

2.2 sass编译

2.2.1 命令行编译

单文件转换命令 sass style.scss style.css
单文件监听命令 sass --watch style.scss:style.css
文件夹监听命令 sass --watch sassFileDirectory:cssFileDirectory
css文件转成sass/scss文件（在线转换工具css2sass）

sass-convert style.css style.sass   
sass-convert style.css style.scss

命令行其他配置选项

运行命令行帮助文档，可以获得所有的配置选项 sass -h
我们一般常用的有--style，--sourcemap，--debug-info等。

sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info

- --style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。
- --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
- --debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

四种style生成后的css

SASS提供四个编译风格的选项：

- 　　* nested：嵌套缩进的css代码，它是默认值。
- 　　* expanded：没有缩进的、扩展的css代码。
- 　　* compact：简洁格式的css代码。
- 　　* compressed：压缩后的css代码。 sass --style compressed test.sass test.css

生产环境当中，一般使用最后一个选项。SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。

四种style生成后的css

// nested
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

// expanded
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

// compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

// compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

四种Style生成后的css