zoukankan      html  css  js  c++  java
  • 安装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-x64in里将有下面的文件。 
    这里写图片描述 
    4、Webstorm里添加Watcher 
    同Less类似,在工程里新建scss文件时会自动显示【Add Wather】,如果没有提示,也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【SCSS】打开New Watcher配置界面。 
    这里写图片描述 
    默认值(默认生成css 和 css.map)

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

    修改后(生成压缩后css)

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

    很简单,比Less还要简单。写一段scss代码试试。 
    这里写图片描述

    补充: 
    参数值里,-t 后面可以配置的值

    结果
    nested 嵌套
    expanded 展开
    compact 每句一行
    compressed 压缩
  • 相关阅读:
    BZOJ 4236~4247 题解
    OCUI界面设计:滚动视图与分页控件初探
    大数乘法
    Effective C++ 11-17
    [Matlab+C/C++] 读写二进制文件
    Java 反射 方法调用
    如何使用LaTeX让自己不乱?
    LaTeX 相对于 Word 有什么优势?
    你在发表理科学术文章过程中有哪些经验值得借鉴?
    破译手势在对话中的意义
  • 原文地址:https://www.cnblogs.com/my--sunshine/p/7380219.html
Copyright © 2011-2022 走看看