前言

这段时间一直在看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文件的更多相关文章

  1. 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

    [文件(File)]-[设置(Settings)]-[工具(Tools)]-[File Watchers]-[+]-[Less]打开New Watcher配置界面. https://blog.csdn ...

  2. 安装Nodejs、npm、Less(支持生成压缩后的css)

    安装Nodejs和npm 1.到https://nodejs.org/en/下载最新的版本,安装到d盘下,假设安装后的路径为D:\Program Files\nodejs, 笔者当前的版本v6.10. ...

  3. Visual studio 创建文件时自动添加备注

    Visual studio 创建文件时自动添加备注 描述 要求每回添加一个类,普通类或单元测试类文件头自动添加备注, 比如:Copyright, FileName, Author and so on. ...

  4. Pycharm---新建文件时 自动添加作者时间等信息

    可用的变量有: $ {PROJECT_NAME} - 当前项目的名称. $ {NAME} - 在文件创建过程中在“新建文件”对话框中指定的新文件的名称. $ {USER} - 当前用户的登录名. $ ...

  5. Pycharm新建文件时自动添加基础信息

    位置:File->settings->Editor->File and Code Templates->Python Script 添加以下代码: #!/usr/bin/env ...

  6. 设置PyCharm创建文件时自动添加头文件

    找到该路径并添加以下信息 File->settings->Editor->File and Code Templates->Python Script  #!/usr/bin/ ...

  7. Pycharm在创建py文件时,自动添加文件头注释

    依次File -> Settings -> Editor -> File and Code Templates -> Python Script   添加以下代码: # -*- ...

  8. PyCharm创建文件时自动添加头注释

    进入设置 File->settings->Editor->File and Code Templates->Python Script 添加以下代码: #!/usr/bin/e ...

  9. 设置Pycharm在创建py文件时自动添加文件头注释(类似于钩子特性)

    在每次新建一个py文件的时候 1 如何自动添加 #!/usr/bin/env python2 自动添加       #-*- coding: utf-8 -*- 操作方法: File -> se ...

随机推荐

  1. CentOS服务器上搭建Gitlab安装步骤、中文汉化详细步骤、日常管理以及异常故障排查

    一, 服务器快速搭建gitlab方法 可以参考gitlab中文社区 的教程centos7安装gitlab:https://www.gitlab.cc/downloads/#centos7centos6 ...

  2. 怎样用Javascript定义一个类

    其实Javascript中没有类这个定义,但是有类这个概念.很多人都写过这样的代码,对,没错,就是如下代码,清晰的不能再清晰了,就是一个关键字 function,然后定义一个方法名,方法名后紧跟一对括 ...

  3. DropDownList添加客户端下拉事件操作

    如果要想给 DropDownList 服务器控件添加客户端下拉事件,我们可以强制给它添加 onchange 事件,尽管在控件中没有这个方法的提示.添加完这个事件还不能达到目的,还要设置 AutoPos ...

  4. mysql数据库中的存储引擎是什么意思呢

    需求描述: 在看mysql的内容,经常提到存储引擎,那么到底什么是存储引擎呢 在这里对于概念进行理解,记录下. 概念解释: 存储引擎(storage engine):存储引擎就是mysql中的一个组件 ...

  5. JAVA程序员应该看的15本书的电子版

    转载▼ 转载自:http://blog.sina.com.cn/s/blog_8297f0d00100v5ew.html 作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多, ...

  6. 对double数据类型的数据保留两位小数,并且进行四舍五入

    1.代码如下: /** * 对double数据类型的数据 保留两位小数,并且进行四舍五入 * @author Administrator */ public class Main { // 工具类 p ...

  7. Qt监控Arduino开关状态(读取串口数据)

    setup.ini配置文件内容 [General] #游戏所在主机IP GameIp1=192.168.1.151 GameIp2=192.168.1.152 GameIp3=192.168.1.15 ...

  8. php 连接mongdb的类

    <?php/** * php 连接mongdb的类的封装 * @author 李秀然 */ class mongdb{ private $host;//"mongodb://admin ...

  9. Spring学习笔记--声明一个简单的Bean

    spring依赖的maven dependencyhttp://mvnrepository.com/artifact/org.springframework 在pom.xml中添加如下依赖: < ...

  10. Anfroid 在界面中显示图片 ImageView

    ImageView1.什么是ImageView是显示图片的一个控件2.ImageView属性android:src ImageView的内容颜色 android:background ImageVie ...