sass的入门（安装以及sublime中如何编译sass）

很久之前就听到了sass和less，但是因为人懒（默默吐槽下自己），就没有去了解相关的知识。但是身为一个前端人员不了解sass好像有点low low 的，所以现在开始接触使用sass了。

万事开头难，总结一下sass的安装以及sass的编译

sass依赖于Ruby语言开发的，所以安装sass前需要先去安装下Ruby。

具体的Ruby的安装sass的官网上有，百度经验上也有很多，我下载的时候没有选择带devkit的。

重要的是：一定在安装时选择 Add Ruby executables to your PATH添加到系统环境变量

安装Ruby之后，就可以通过Ruby的 gem install sass 和 gem install compass 来安装sass 和compass了。

sass的编译

之所以进行sass的编译最直接的理解就是浏览器中只能够识别css，所以要对我们已经写好的sass进行编译使之成为浏览器可以识别的css。（具体的编译的目的可以自行百度下）

下面看下如何在sublime tex3 中进行sass的编译

1、安装成功Package Control后，快捷键Ctrl+Shift+P，调出Package Control。

2、在面板中输入install 调出线上sublime插件库。

分别安装sass和sass build插件

如下图所示：

安装好这两款插件后，查看Tools->Build System可以发了有了SASS和SASS - Compressed两种编译模式。

Sass编译出来的样式风格有4种：
　　嵌套输出方式 nested 它是默认值
　　展开输出方式 expanded
　　紧凑输出方式 compact
　　压缩输出方式 compressed 生产环境当中一般使用这个

 重要的是一定要重启sublime，否则没有效果（被坑了很长时间解决这个为什么没有效果）

sublime-执行编译

首先得新建一个scss文件，比如test.scss(编码必须是UTF-8),并写点Scss代码，保存之后，按下快捷键Ctrl+B

效果：

如果表示编译成功，并自动生成了test.css和test.css.map两个文件，然后就可以在html种引用这个css文件了。注意在编译的时候test.scss文件模式必须设置为Sass,在sublime工具的右下角可以看到。（或者 选择 工具---->编译系统--->sass）
通过sublime来编译Sass可以实时进行，所以就没有了watch等一些监听源文件的功能。

注：刚开始接触scss的时候，我还在想是不是本地编译好了之后，上到服务器上，服务器需要进行别的配置啊，然后大牛告诉我不用，因为已经编译过了…………

指定生成的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}/../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.sublime-build。 没有文件夹的就新建一个文件夹。

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

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

注意： 每一次的sass的文件的更改，都需要进行重新的Ctrl + b的编译

scss的语法高亮和自动提示语法

我们在完成以上步骤，开始编写scss的代码的时候发现，语法自动提示没了……这样平时记不住有些属性的我们抓心啊。但是sublime本身不支持scss的语法高亮。

怎么办呢，当当当，这个时候我们就需要安装一个可以使得scss高亮的安装包了

1. https://github.com/kuroir/SCSS.tmbundle/zipball/SublimeText2    scss高亮的语法下载

2.将下载下来的文件包解压。

3.打开sublime安装目录下的Data → Packages目录(名字可以改为SCSS)

4.将包放入打开的目录，重启sublime，搞定。

编译sass，遇到报错error style.scss (Line 3: Invalid GBK character "\xE5")

今天学习sass，写了一行中文注释,结果却遇到了报错:

1 cmd.exe /D /C call C:/Ruby23-x64/bin/scss.bat --no-cache --update style.scss:style.css
2       error style.scss (Line 3: Invalid GBK character "\xE5")
3
4 Process finished with exit code 1

以前在公司使用的mac没用遇到这种问题,当使用windows 7开发是遇到了这个问题。

在github中找到了答案,现在记录在这里:

在sass文件开头写上:

@charset "utf-8";