安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件

4 篇文章 0 订阅
2 篇文章 0 订阅

前言

这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见《在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件》)。
随着学习的加深,开始接触Sass了,Bootstrap V3也提供了Sass的源码,而且V4官方就只提供Sass的源码,从侧面证明Sass的流行趋势,毕竟Sass功能更全面,因此笔者决定以后就使用Sass了(新版本叫Scss)。

开始动手

1、下载rubyinstaller-2.3.3-x64.exe 安装(从官网下载,或者从这里链接:http://pan.baidu.com/s/1o7BxbR0 密码:rctf),注意,安装过程中下面的设置。
这里写图片描述
2、安装完成后用命令检查是否安装成功,成功会显示版本信息。

ruby -v
gem -v

这里写图片描述
3、安装Sass

gem install sass

安装完后,C:\Ruby23-x64\bin里将有下面的文件。
这里写图片描述
4、Webstorm里添加Watcher
同Less类似,在工程里新建scss文件时会自动显示【Add Wather】,如果没有提示,也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【SCSS】打开New Watcher配置界面。
这里写图片描述
默认值(默认生成css 和 css.map)

参数名参数值(下面no和update前是两个”-“)
ProgramC:\Ruby23-x64\bin\scss.bat
Arguments–no-cache –update $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh$FileNameWithoutExtension$.css

修改后(生成压缩后css)

参数名参数值(下面no和update前是两个”-“)
ProgramC:\Ruby23-x64\bin\scss.bat
Arguments–no-cache –update -t compressed $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh$FileNameWithoutExtension$.css

很简单,比Less还要简单。写一段scss代码试试。
这里写图片描述

补充:
参数值里,-t 后面可以配置的值

结果
nested嵌套
expanded展开
compact每句一行
compressed压缩
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值