Sass 使用及自动编译(intellij idea/webst
1.sass
基于Ruby
语言开发而成,因此安装sass
前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)
window下安装SASS首先需要安装Ruby
,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH
添加到系统环境变量。
安装完成后,运行CMD
输入ruby -v
,测试是否安装成功,成功则显示版本,如下图:
2.更换gem
源为 https://rubygems.org/
//1.删除原gem源 gem sources --remove https://rubygems.org/
//2.添加国内淘宝源 gem sources -a https://ruby.taobao.org/
//3.打印是否替换成功 gem sources -l
//4.更换成功后打印如下 *** CURRENT SOURCES *** https://ruby.taobao.org/
3.全局安装 sass
和 compass
,执行 gem install sass
和 gem install compass
,如下:
4.确认 sass
和 compass
安装成功:命令行输入:sass --version
compass -v
验证
5.此处以 intellij idea 为例,使用其自动编译工具。
1)打开 intellij idea ,File => settings => Plugins , 查看是否有 File Watchers 插件,没有的话,点击下方 Install JetBrains plugins 去安装。
2)安装成功后,列表显示出此插件。
3)settings => Tools => File Watchers ,点击右侧加号,添加 SCSS ,点击 OK。
4)在弹出的 New Watcher => Watcher Setting => Program 处指向 Ruby 的安装地址,点击OK,配置完成。
6.此时,再新建 scss 文件,会同时新建一个同名的 css 文件 和 map,直接引用 css文件即可。
Sass
安装参考:https://www.sass.hk/install/