Sass -- 安装配置及简单使用

本文仅适用于 Windows 系统。

什么是 Sass

Sass---- CSS 扩展语言或 CSS 预处理器，是一种 CSS 的开发工具，提供了许多便利的写法，节省了设计者的时间，使得 CSS 的开发变得简单和可维护。

Sass 是用 Ruby 语言写的，但是两者之间的语法没有关系。不懂 Ruby ，也可以使用。但是必须先安装 Ruby ，然后再安装 Sass 。

安装 Ruby

每个流行的平台都有多种工具可用于安装 Ruby：

• Linux/UNIX 平台，可以使用第三方工具（如 rbenv 或 RVM）或使用系统中的包管理系统。
• OS X 平台，可以使用第三方工具（如 rbenv 或 RVM）。
• Windows 平台，可以使用 RubyInstaller。

安装过程按照提示来即可

.......

安装 Sass

假定已经安装好了 Ruby

运行 cmd 进入命令提示符。输入 ruby -v , gem -v 查看版本号，如果能正确显示版本号,那么恭喜安装成功!

接着在命令行输入下面的命令:

gem install sass

现在应该已经安装好了 Sass 。不放心可以再检查一遍,在命令行输入下面的命令:

sass -v

若正确显示版本号,那么就可以正常使用了!

Sass的一些使用

Sass 文件就是普通的文本文件，可以直接使用 CSS 语法。文件后缀名是 .scss ，意思为Sassy CSS。

假定新建了一个 demo.scss 文件, 并写了一部分代码

输入 sass demo.scss 命令,可实现 .scss 文件转化为 css 代码(注意:这里 css 代码是显示在命令行中):

sass demo.scss

要将显示结果保存成 css 文件，则输入下面命令:

sass demo.scss demo.css

也可以让 Sass 监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本

• 监听文件

sass --watch demo.scss:demo.css

• 监听目录

sass --watch app/sass:public/stylesheets

另外,使用 sass --help 可以列出完整的帮助文档。

Sass 编译时可能会出现的问题

Syntax error: Invalid GBK character 错误的解决方法:

找到 ruby 的安装目录，里面有 sass 模块，如下面这个路径：

• “C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.5.3/lib/sass” *

找到文件 engine.rb 后打开，在文件中所有的 require XXXX 之后,添加下面这行代码即可:

Encoding.default_external = Encoding.find('utf-8')