美文网首页html + css 基础训练
Sass 使用及自动编译(intellij idea/webst

Sass 使用及自动编译(intellij idea/webst

作者: sylvia_yue | 来源:发表于2017-11-07 13:49 被阅读120次

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.全局安装 sasscompass ,执行 gem install sassgem install compass,如下:


4.确认 sasscompass安装成功:命令行输入: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/

相关文章

网友评论

    本文标题:Sass 使用及自动编译(intellij idea/webst

    本文链接:https://www.haomeiwen.com/subject/pnudmxtx.html