安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
前言
这段时间一直在看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 | 压缩 |
安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件的更多相关文章
- 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
[文件(File)]-[设置(Settings)]-[工具(Tools)]-[File Watchers]-[+]-[Less]打开New Watcher配置界面. https://blog.csdn ...
- 安装Nodejs、npm、Less(支持生成压缩后的css)
安装Nodejs和npm 1.到https://nodejs.org/en/下载最新的版本,安装到d盘下,假设安装后的路径为D:\Program Files\nodejs, 笔者当前的版本v6.10. ...
- Visual studio 创建文件时自动添加备注
Visual studio 创建文件时自动添加备注 描述 要求每回添加一个类,普通类或单元测试类文件头自动添加备注, 比如:Copyright, FileName, Author and so on. ...
- Pycharm---新建文件时 自动添加作者时间等信息
可用的变量有: $ {PROJECT_NAME} - 当前项目的名称. $ {NAME} - 在文件创建过程中在“新建文件”对话框中指定的新文件的名称. $ {USER} - 当前用户的登录名. $ ...
- Pycharm新建文件时自动添加基础信息
位置:File->settings->Editor->File and Code Templates->Python Script 添加以下代码: #!/usr/bin/env ...
- 设置PyCharm创建文件时自动添加头文件
找到该路径并添加以下信息 File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/ ...
- Pycharm在创建py文件时,自动添加文件头注释
依次File -> Settings -> Editor -> File and Code Templates -> Python Script 添加以下代码: # -*- ...
- PyCharm创建文件时自动添加头注释
进入设置 File->settings->Editor->File and Code Templates->Python Script 添加以下代码: #!/usr/bin/e ...
- 设置Pycharm在创建py文件时自动添加文件头注释(类似于钩子特性)
在每次新建一个py文件的时候 1 如何自动添加 #!/usr/bin/env python2 自动添加 #-*- coding: utf-8 -*- 操作方法: File -> se ...
随机推荐
- CentOS服务器上搭建Gitlab安装步骤、中文汉化详细步骤、日常管理以及异常故障排查
一, 服务器快速搭建gitlab方法 可以参考gitlab中文社区 的教程centos7安装gitlab:https://www.gitlab.cc/downloads/#centos7centos6 ...
- 怎样用Javascript定义一个类
其实Javascript中没有类这个定义,但是有类这个概念.很多人都写过这样的代码,对,没错,就是如下代码,清晰的不能再清晰了,就是一个关键字 function,然后定义一个方法名,方法名后紧跟一对括 ...
- DropDownList添加客户端下拉事件操作
如果要想给 DropDownList 服务器控件添加客户端下拉事件,我们可以强制给它添加 onchange 事件,尽管在控件中没有这个方法的提示.添加完这个事件还不能达到目的,还要设置 AutoPos ...
- mysql数据库中的存储引擎是什么意思呢
需求描述: 在看mysql的内容,经常提到存储引擎,那么到底什么是存储引擎呢 在这里对于概念进行理解,记录下. 概念解释: 存储引擎(storage engine):存储引擎就是mysql中的一个组件 ...
- JAVA程序员应该看的15本书的电子版
转载▼ 转载自:http://blog.sina.com.cn/s/blog_8297f0d00100v5ew.html 作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多, ...
- 对double数据类型的数据保留两位小数,并且进行四舍五入
1.代码如下: /** * 对double数据类型的数据 保留两位小数,并且进行四舍五入 * @author Administrator */ public class Main { // 工具类 p ...
- Qt监控Arduino开关状态(读取串口数据)
setup.ini配置文件内容 [General] #游戏所在主机IP GameIp1=192.168.1.151 GameIp2=192.168.1.152 GameIp3=192.168.1.15 ...
- php 连接mongdb的类
<?php/** * php 连接mongdb的类的封装 * @author 李秀然 */ class mongdb{ private $host;//"mongodb://admin ...
- Spring学习笔记--声明一个简单的Bean
spring依赖的maven dependencyhttp://mvnrepository.com/artifact/org.springframework 在pom.xml中添加如下依赖: < ...
- Anfroid 在界面中显示图片 ImageView
ImageView1.什么是ImageView是显示图片的一个控件2.ImageView属性android:src ImageView的内容颜色 android:background ImageVie ...