[Sass学习]Sass的安装和使用

Posted 2020-08-20 小碎石

安装

需要安装Ruby, Sass

Ruby的安装分两个平台

1. Window平台安装方法：

　　第一步，去官网 http://rubyinstaller.org/downloads 下载ruby

　　第二步，安装，选择默认安装即可，安装选项选第二项。

　　第三步，安装完成后，打开ruby command，调整sources

　　　　　　gem sources -l  查看当前镜像地址

　　　　　　gem sources --remove [url]

　　　　　　gem sources -a http://gems.ruby-china.org/

2. Mac平台安装方法：

　　Mac平台自带Ruby，可以直接安装Sass

 

Sass的安装方法   gem install sass

检测是否安装成功  sass -v

配置：正常情况下，在scss文件中不允许出现UTF8格式的中文符号，配置方法是打开Sass安装目录下的文件

C:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb

打开该文件后在文件里的require(XXX)语句之后加入

Encoding.default_external = Encoding.find("utf-8");

 

使用

在ruby command prompt中，使用Sass命令完成SCSS-->CSS的编译过程，语法：

sass <scss file path>/filename.scss:<css file path>/filename.css

example:  

　　cd filepath

　　sass css/file.scss:css/file.css

 

如果有多个SCSS文件需要编译，可以不用指定具体文件名，而是直接使用文件目录即可，语法：

sass <scss file path>:<css file path>

example:

　　　　cd filepath

　　　　sass css/:css/

如果需要实时监听SCSS文件变化，并同时生成新的CSS文件。可以使用 --watch 参数，语法：

sass --watch

example:

　　　　sass --watch css/:css/