webstorm 设置 sass自动编译问题
2018-11-03 08:50:12来源:博客园 阅读 ()
sass语法、使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译。
sass编译是需要Ruby环境的,可以到这里去下载 : https://rubyinstaller.org/downloads/ ,安装时选择加入Path
安装完成后需测试安装有没有成功,运行CMD
输入以下命令:
ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
如上已经安装成功,Ruby
自带一个叫做RubyGems
的系统,用来安装基于Ruby
的软件。因为国内网络的问题导致gem
源间歇性中断因此我们需要更换gem
源。(使用淘宝的gem源https://ruby.taobao.org/ )
//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的问题加无法访问淘宝源,我把它换成了腾讯源 ,腾讯源地址: http://gems.ruby-china.com/
我们下面来安装Sass
和Compass
。要安装最新版本的Sass
和Compass
,你需要输入下面的命令:
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass) gem install sass gem install compass
在每一个安装过程中,你都会看到如下输出:
Fetching: sass-3.x.x.gem (100%) 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(一些 CSS 小技巧)和特定于浏览器的语法
Progarm: Ruby SaSS 扩展路径
C:\Ruby25-x64\bin\sass.bat
Arguments:配置编译参数
--no-cache --update -t compact $FileName$:$FileNameWithoutExtension$.css
-t 后面有4种参数可选:
- 嵌套输出方式 nested 它是默认值
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed 生产环境当中一般使用这个
Output paths to refresh:文件输出路径
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
配置完毕,添加一个 .scss文件,果然自动编译成了.css文件。
参考文档: Sass官网
webstorm设置sass自动编译,及参数配置
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:HTML的简介
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- h5 video标签在ios8,9无法设置静音 2020-04-13
- css--->圆角设置 2020-04-05
- sass内置函数 2020-03-29
- sass常见的基本数据类型+加减乘除基本运算 2020-03-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash