安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
来源:互联网 发布:aj5淘宝下单截图 编辑:程序博客网 时间:2024/05/21 22:30
前言
这段时间一直在看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 -vgem -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)
修改后(生成压缩后css)
很简单,比Less还要简单。写一段scss代码试试。
0 0
- 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
- 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
- 结合YUI Compressor在WebStrom添加Watcher实现编辑js文件时自动压缩(包括自定义监听范围Scope)
- 在WebStorm里配置watcher实现编辑less文件时自动生成.css文件
- webstrom自动编译sass文件为css
- 轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher
- 【更新】sass安装(淘宝源安装失败直接下载按照gif动画安装)+webstorm中为scss添加watcher转化为css
- SASS、SCSS和css的关系
- Re:从零开始的实习生活01----webstorm和intellij idea下如何自动编译sass和scss文件
- CSS 和 Sass (SCSS) 规范
- webstrom scss(sass)配置
- mac webstrom 使用scss,sass
- 前端编码规范及 SASS、SCSS和CSS的关系
- SASS学习系列之三--------- node-sass 自动编译scss 文件
- Sass 和 SCSS的区别
- 在myeclipse8.5 中添加 dtd 文件实现xml编辑时自动提示
- 在 Windows下安装Sass和Ruby
- sass安装和webStrom编辑器(win7)
- LVS+keealived配置步骤
- 快速排序
- Navicat Premium还原SqlSever数据(MDF及LDF格式)
- 全组合和全排列
- 快速排序程序及易错点总结
- 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
- 应对流量洪峰时有哪些应对
- 设置oracle为共享模式的方法
- 第一个项目:字符画神器——全程制作历程
- 从基础开始的异世界生活------poj2965
- MyBatis 学习笔记之Logging -【使用日志框架是有根据顺序选择的】
- 进程切换分析(2):TLB处理
- Google Analysis正则表达式
- Android官方资料--OTA Updates