sublime text 3 配置sass环境

一，什么是sass，有什么用

sass准确来说是一套很方便你来管理你css的框架，sass自己本身并不是css，但是有着一套跟css风格类似的规范，却又非常适合开发使用。具体方便的地方可以搜索sass的教程就能明白了。

但他终归不是css，也就是说不能被浏览器识别，那么想要在浏览器看到效果，还必须把你的sass文件转成css文件。

二，怎么把sass文件转成css文件

sass框架在提出来的时候，肯定会同步考虑到提出这个转化的工具，其实名字就叫做sass build。可以单独安装，也可以继承咋IDE里。

我这里主要就sublime来集成sass build讲解。

准备工作

1，安装sublime

2，安装sublime的package control plugin

上面2步不属于sass范畴的，属于sublime工具使用的范畴，一般用sublime开发的同学应该都有这个环境，没有的同学可以参考：http://blog.csdn.net/aa841538513/article/details/72547605

3，通过package control plugin安装：sass和sass build

4，重启sublime。这个很重要啊，我在这里被坑了半个多小时。

然后，你就可以开始愉快的进行sass开发了

这里假设你写了一个文件style.scss，打开这个文件，然后 control + B ，就会在默认的目录生成对应的style.css文件和style.css.map文件

5，指定生成的css文件存放目录（可选。一般优秀的程序员都会这么做的）

因为系统会默认指定在scss文件同目录下，这样一个style.scss旁边就会有style.css和style.css.map文件，一旦scss文件多了，这些文件就先得很冗余，因为.css和.css.map文件一般都是不需要特别关注的，而scss文件确实我们一直在修改的文件。

所以，优秀的程序员都会很好的管理分类这些文件，指定.css和.css.map的生成路径。

操作步骤：

1）Tools->build system -> new build system ... 会生成一个文件，把下面的内容复制到文件中覆盖里面的内容

 {  
    "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css","--stop-on-error","--no-cache","--style","compressed"],  
    "selector": "source.sass, source.scss",  
    "line_regex": "Line ([0-9]+):",  
  
    "osx":  
    {  
        "path": "/usr/local/bin:$PATH"  
    },  
  
    "windows":  
    {  
        "shell": "true"  
    }  
} 

能看懂的同学就还可以根据自己的情况进行修改，看不懂的同学就别改了，直接用吧，这种情况的修改应该是符合绝大多数场景的需求的。

2）然后ctrl+s保存到SubLime ->Packages _>MySass 文件夹中，并把文件命名为MySass。 没有文件夹的就新建一个文件夹。

3）回到sublime，点击tools->Build system -> MySass。 

4）然后打开你想要编译的.scss文件，ctrl+B. 如果在对应的css文件夹生成了对应的.css和.css.map文件，那就成功了。