SASS的安装和webstorm配置

安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby）
window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

查看Ruby是否安装成功

$ ruby -v

国内网络的问题导致gem源间歇性中断因此我们需要更换gem源
注意：淘宝镜像源已停用，需要使用Ruby China镜像

//1.删除原gem源
$ gem sources --remove https://rubygems.org/

//2.添加Ruby China镜像
$ gem sources -a https://gems.ruby-china.com/

//3.打印是否替换成功
$ gem sources -l
*** CURRENT SOURCES ***
https://gems.ruby-china.com/

安装SASS

$ gem install sass
$ sass -v

SASS命令行

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

webstorm配置

配置webstorm的文件监听，当scss文件修改时，自动生成新的css文件，免去手动调用命令行的麻烦

打开webstorm配置，找到File Watchers，点击右边的加号

image.png

填写如下配置

image.png

Arguments：

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

Output paths to refresh：

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

如果是开发微信小程序，只需要将两个配置的css改成wxss即可

修改scss代码，保存，会在同一个目录中生成css文件和source-map文件

可能出现的错误

• 开启watch模式的时候，报错

Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8 Use --trace for backtrace.

出现此类错误时 检查下路径是否出现中文

参考资料

• SASS中文网
• Ruby China镜像