文 / 秦未
前端发展的很快，我以为自己不会这么快接触到Sass，平时都是用正常的写法写CSS，虽然代码没多少，但是我在写CSS的时候也不得不注释，不知道你们有没有这样的体会，修改一处css时，想要快速找到相关的CSS选择器，如果使用搜索，你会发现找到很多CSS选择器，即使有注释也要翻，时间就浪费在这里了，昨天我才开始了解Sass，使用后，我发现的确很好用，起码项目结构看起来舒服多了，CSS选择器也只会出现一次！搜索不用那么费劲了。
于是赶快给大家安利一下。
首先我们要明白 Sass 就是 CSS，如果你并不想使用Sass的诸多特性，你也可以只在Sass的样式表中书写CSS，这一点问题都没有，然后当你需要一些Sass特性的时候，你可以拿起来写。
开始的时候我想Sass文件还要经过命令行编译成CSS文件，这样岂不是不方便调试！所以一开始我是抵制的，不过这个问题完全是我想多余了，现在很多编辑器都有插件，实时编译是很快的，而且我也发现一款软件，可以检测文件变动，实时编译Sass文件，它就是 koala
koala界面
koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
没有后顾之忧的我，赶快使用了Sass，现在我已经重写了自己项目里面的CSS，虽然写的过程挺麻烦的，但后面改动会方便很多，我建议你从一开始构建项目时就使用Sass！
Sass官方网站也有一篇文件：为什么要开始学习Sass？
你可以看看！我在这里教大家简单使用它：
1.配置koala
koala编译时并不支持中文，我们需要修改一下它的配置文件。
首先我们找到它的安装目录，打开\Koala\rubygems\gems\sass-3.4.23\lib\sass\，找到engine.rb并打开（有可能不是sass-3.4.23文件夹，不过版本不同设置都是一样的）。
在 module Sass之前加入一行代码
Encoding.default_external = Encoding.find('utf-8')
保存退出！重启koala。
2.使用koala
设置中可以设置中文，修改后重启生效。
你需要提前建立一个Sass文件，它可能是以.sass或者.scss后缀结尾的，两者的区别:
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。
所以我建议你使用SCSS，然后把包含该文件的文件夹拖到koala中，当然你也可以在里面选择打开。
然后你就看到之前那张图差不多的样子了，左击该文件你会看到编译选项，里面有些选项，比如Debug Info，表示开启调试信息，Source Map表示源图（保留一个map文件），其中要注意的是输出方式里面选择最后一个可以输出压缩后的Css。
当你修改文件保存的那一刻，koala会自动为你编译成css文件，速度不错，几乎感觉不到编译过程。后续的使用就不多说了，自己去试吧！
3.Sass语法
官方的文档永远最详细，而且是中文的：Sass快速入门
安利结束！
网友评论