webstorm 设置 sass自动编译问题

sass语法、使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译。

sass编译是需要ruby环境的,可以到这里去下载  :     ,安装时选择加入path

     

安装完成后需测试安装有没有成功,运行cmd输入以下命令:

ruby -v
//如安装成功会打印
ruby 2.2.2p95  [i386-mingw32]

如上已经安装成功,ruby自带一个叫做rubygems的系统,用来安装基于ruby的软件。因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。

//1.删除原gem源
gem sources --remove https://rubygems.org/
//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/
//3.打印是否替换成功
gem sources -l
//4.更换成功后打印如下
*** current sources ***
https://ruby.taobao.org/

我的机器上由于https的问题加无法访问淘宝源,我把它换成了源 ,源地址: 

我们下面来安装sass和compass。要安装最新版本的sass和compass,你需要输入下面的命令:

//安装如下
gem install sass
gem install compass

在每一个安装过程中,你都会看到如下输出:

fetching: sass-3.x.x.gem 
successfully installed sass-3.x.x
parsing documentation for sass-3.x.x
installing ri documentation for sass-3.x.x
done installing documentation for sass after 6 secon
1 gem installed

安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:

//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h

下面打开webstorm, file - settings - tools - file watchers + - scss

 

  在这里  file type  配置为  scss style sheet  ,不要配置为 sass style sheet 。scss 是 sass 3 引入新的语法,其语法完全兼容 css3,并且继承了 sass 的强大功能。也就是说,任何标准的 css3 样式表

都是具有相同语义的有效的 scss 文件。另外,scss 还能识别大部分 css hacks和特定于浏览器的语法

  progarm: ruby sass 扩展路径

c:\ruby25-x64\bin\sass.bat

 

 arguments:配置编译参数

--no-cache --update -t compact $filename$:$filenamewithoutextension$.css

-t 后面有4种参数可选:

output paths to refresh:文件输出路径

$filenamewithoutextension$.css:$filenamewithoutextension$.css.map

配置完毕,添加一个 .scss文件,果然自动编译成了.css文件。

参考文档:  sass官网

 

Copyright © 2018 百家乐试玩百家乐试玩-百家乐游戏 All Rights Reserved