sass环境配置及作用

1、sass的编译工具：

ruby是一款强大的脚本程序，你可以理解为与python是一样的。但sass的开发并不需要了解ruby的语法规则，sass只需要通过ruby来对sass文件进行编译，用来生成最终要使用的CSS文件。

2、ruby工具的安装：

因为作者使用的windows的操作系统，所以只介绍windows的安装方法。

在百度搜索【RubyInstaller】然后选择合适的版本（32位/64位等）进行安装就行了。

安装完成后，要注意ruby的安装路径是否添加到了环境变量之中。如果没有加入，在编译sass文件时可能会报错。

在命令行中输入【ruby】命令，如果能被识别就说明已加了环境变量。

3、sass的安装方法：

在命令行中输入【gem install sass】命令就可以自动完成sass的安装。

安装时有可能报以下错误：

C:/Ruby25/lib/ruby/2.5.0/win32/registry.rb:910:in `encode': U+8BCD to Windows-31J in conversion from UTF-16LE to UTF-8 to Windows-31J (Encoding::UndefinedConversionError)

解决方法如下：

在ruby安装目录C:\Ruby25\lib\ruby\2.5.0\win32\registry.rb（你的可能不同）找到：

LOCALE = Encoding.find(Encoding.locale_charmap)

替换为：

LOCALE = Encoding::UTF_8

再次运行【gem install sass】命令就可以了。

4、编译sass文件：

通过以下命令可以很方便的把sass文件编译出想要的CSS代码：

1. CSS代码在命令窗口显示：

sass abc.scss

2. 生成对应的CSS文件：

sass abc.scss test.css

5、sass文件的编译选项：

1. nested：默认值，嵌套缩进的css代码。

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

3. compact：简洁格式的css代码。

4. compressed：压缩后的css代码。

使用方法举例：

因为在代码上线时，不希望别人一目了然的看到CSS的内容，所以这个时候都会选择【compressed】来进行编译：

sass --style compressed abc.sass test.css

6、修改后自动编译：

开发人员都知道CSS的改动是非常频繁的，如果改一次就要编译一次会比较麻烦。所以sass提供了一个自动编译的方法：

1. 单个文件变动后自动编译：

sass --watch input.scss:output.css

2. 文件夹中有变动后自动编译：

sass --watch web/sass:web/css

7、sass开发的说明：

sass的语法其实就是为CSS加入编程元素，使开发人员可以更好的开发与维护写出来的代码。

其相关的语法规则也比较简单，可以在网上找到许多比较好的网站，这里就不多说了。

最后希望大家都能从CSS的复杂工作中解放出来。