安装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 ...
随机推荐
- win快捷键技巧
只按Win键,这个所有人都知道,打开和关闭开始菜单. Win+E:打开我的电脑 Win+F:搜索文件 Win+D:显示桌面 Win+M:最小化所有窗口 Win + Pause:显示系统属性对话框 Wi ...
- C# 温故而知新:Stream篇(二)
TextReader 和StreamReader 目录: 为什么要介绍 TextReader? TextReader的常用属性和方法 TextReader 示例 从StreamReader想到多态 简 ...
- List<T>与ObservableCollectio<T> 的区别
在WPF中绑定通常会使用ObservableCollection,为什么不使用List呢? 简单是解释:List不包含值变通知功能,所以绑定了也许会出现绑定的数据与呈现数据不一致的问题. 通常绑定会使 ...
- 改善C#程序的建议5:引用类型赋值为null与加速垃圾回收
http://www.cnblogs.com/luminji/archive/2011/04/07/2007205.html 在标准的Dispose模式中(见前一篇博客“C#中标准Dispose模式的 ...
- POJ 1655 Balancing Act(求树的重心--树形DP)
题意:求树的重心的编号以及重心删除后得到的最大子树的节点个数size,假设size同样就选取编号最小的. 思路:随便选一个点把无根图转化成有根图.dfs一遍就可以dp出答案 //1348K 125MS ...
- GIS-001-gdal软件下载地址
http://www.gisinternals.com/ http://download.gisinternals.com/sdk/downloads/release-1600-x64-gdal-1- ...
- ionic跳转(一)
在ionic中可以用两个办法写中转链接(写模版地址或路由地址) 1)a 标签的 href <a class="button button-icon icon ion-android-h ...
- Python SQLAlchemy 模块
SQLAlchemy 简介: SQLAlchemy 是用于实现 ORM(Object Relational Mapping,对象关系映射)的一个模块,即把数据库的表结构映射到对象上在 Python 中 ...
- ftp服务通信操作
1.将本地虚拟机网卡设置ip--->2.将虚拟机系统的网卡ip设置--->3.虚拟机设置特定网络模式vm8nat模式: (1) (2) (3) 保证正常互ping 通信, 4.在虚拟机系统 ...
- linux文件类型详解
*nix 有各种的文件类型 当#ls -la后,会发现在权限位前有个 - 有些是 b 有些是 d 这个位置就是文件类型的标示 普通文件regular file, 用 - (破折号)标示, 比如 ...