• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

这段时间一直在看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
  • 1
  • 2
  • 1
  • 2

 
3、安装Sass

gem install sass
  • 1
  • 1

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

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

修改后(生成压缩后css)

参数名 参数值(下面no和update前是两个”-“)
Program C:\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 压缩

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap