sass 安装与各种命令

css 是一种编程语言，可以用来开发网页样式，但是却不能编程，没有变量，没有条件语句，于是就有了“css预处理器”，

它的原理就是：利用编程语言进行网页样式设计，然后再编译成正常的css文件；

sass是用ruby语言写的，虽然没有什么语法关系，但是使用sass需要先安装ruby再安装sass

假如你已经安装了ruby,如果没有安装，请看这里ruby gem的安装步骤

一 安装sass:

gem install sass

升级sass版本的命令行为

 gem update sass  

查看sass版本的命令行为

  sass -v   

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

  sass -h   

开启编译调试信息(目前sass的调试分为两种，一种为开启debug-info，一种为开启sourcemap（这个将成为主流）)

如开启的是debug-info，则解析的css文件中会有以@media -sass-debug-info开头的代码，如没有则表明没有开启。

如开启的是sourcemap，则在解析的css文件同目录下生成一个.css.map的后缀名文件。

两个命令分别是--debug-info --sourcemap,开启如下：

 sass test.scss:test.css --debug-info 

 sass test.scss:test.css --sourcemap   

开启浏览器调试

F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS。

开启--sourcemap编译，f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的scss文件

火狐浏览器调试

debug-info调试

firefox可以安装插件FireSass使用debug-info来调试。

开启--debug-info编译，f12打开firebug，就可以看到原先右边的css文件变成了我们现在的scss文件

sourcemap调试

firefox 29 将会开始支持sourcemap，注意是火狐自带的调试功能，而不是firebug。

开启--sourcemap编译，右键“查看元素”采用火狐自带的调试功能，打开调试面板，在样式上右键选择“显示原始来源”。

二 sass的使用

sass就是普通的文本文件，可以直接css语法，后缀名是.scss,意思是sassy css

1. 直接在屏幕上经sass文件转换成css文件    sass test.scss
2. 将sass文件转换成css文件      sass.scss test.css     --------一次性将scss文件转换成css文件

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

   　　* nested：嵌套缩进的css代码，它是默认值。

   　　* expanded：没有缩进的、扩展的css代码。

   　　* compact：简洁格式的css代码。

   　　* compressed：压缩后的css代码。

   生产环境当中，一般使用最后一个选项。

　　  　　sass --style compressed test.sass test.css

　　4.sass 监听文件

　　      sass --watch test.scss:test.css

--------在修改scss文件时，css文件会自动同步更新

　 5.sass 监听文件夹

　　　　sass    app/sass:app/css

　  6. css文件转成sass/scss文件

sass-convert test.css test.scss