1、首先从 官网下载ruby
2、安装 过程中
安装成功后,查看版本信息
ruby -v
gem -v
3、 安装Sass ,安装完后,会在 C:\Ruby23\bin 多出如下文件
gem install sass
4、Webstorm里添加Watcher
工具栏--File ---打开Settings下的 -----Tools ---【File Watchers】右边栏的 "+" 选择 SCSS
Program:
C:\Ruby23\bin\scss.bat
Arguments
--no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
Environment variables
C:/Ruby23/bin
ps、 注意,如果文件路径有修改如:
未修改: C:\Ruby23-x64\bin
修改后: C:\Ruby23\bin
这几个地方要统一:
之前是 Ruby23-x64 ------>改后: Ruby23
环境变量也需要改动。。。。。。。。。。。所以。。最好使用默认名称。
编译后前后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 安装(从官网下载,注意,安装过程中下面的设置。
2、安装完成后用命令检查是否安装成功,成功会显示版本信息。
ruby -vgem -v12
3、安装Sass
gem install sass1
安装完后,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 压缩
阅读全文
版权声明:本文为博主原创文章,未经博主允许不得转载。