安装
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.
出现此类错误时 检查下路径是否出现中文
网友评论