青岛澄润国际贸易有限公司

现在的位置: 主页 > 商讯 > 文章列表

文章正文

PHPStrom使用SASS,SCSS和Compass浅析

作者:青岛澄润国际贸易有限公司 来源:wwww.usabcc.com 发布时间:2017-09-09 10:26:27
PHPStrom使用SASS,SCSS和Compass浅析

以前尝试 SASS 的时候写了一篇安装方法,大部分操作还是相同,下面补充一些内容主要是填坑,实在太TMD坑爹了。
补充内容:

安装 SASS 和 Compass

这一步经过我昨天的测试,已经不需要修改源地址了,可以直接通过 https://rubygems.org/ 地址进行下载了,反而淘宝那个地址总是出现 SSL 相关错误,貌似HTTPS证书有问题,所以直接忽略了吧。

安装目录存在空格

如:C:\Program Files\Ruby22-x64\ , 若是这种路径下安装的中间存在空格则会导致 bin 目录下的 .bat 文件无法执行,因为里面多了个双引号,把开头的 @”” 两个双引号去掉一个,有多个 .bat 文件都需要修改下,不知道为什么会有这种低级错误。

这里写图片描述

@""C:\Program Files\Ruby22-x64\bin\ruby.exe" 改成 @"C:\Program Files\Ruby22-x64\bin\ruby.exe" 找不到 compass 自带 SCSS 库

这里写图片描述

新增一个compass库目录的符号链接,注意:不是快捷方式啊,看下图区别,快捷方式实际上是一个文件有个隐藏的 .lnk 后缀名的

这里写图片描述

在cmd中输入vcD4NCjxwcmUgY2xhc3M9"brush:java;"> E:\Website\xxxx.com\www\assets\m\scss\sass>mklink /d compass "C:\Program Files\Ruby22-x64\lib\ruby\gems\2.2.0\gems\compass-core-1.0.3\stylesheets\compass"

这样 @import 就可以找到对应的库文件了
另外注意 符号链接是不能添加到 svn 的,而且好像和 phpstorm 也有些冲突,添加svn忽略compass符号链接后貌似就可以了

还有一个可以设置的地方,是在单独使用 scss 文件监听的时候,scss.bat 可以指定 –load-path 参数,不过实际用户不大,因为经过N次尝试,SCSS的 file watcher 对 compass 的库完全没法运行,全是TMD的错误,搞了两天都没找到解决办法,实在无语了。

scss.bat 全是类似下面这种错误,搞了好久都找不到解决办法,实在搞不定这个问题。。。。但 compass.bat 是能够正常运行的,很无语

cmd.exe /D /C call “C:/Program Files/Ruby22-x64/bin/scss.bat” –load-path “C:\Program Files\Ruby22-x64\lib\ruby\gems\2.2.0\gems\compass-core-1.0.3\stylesheets” –no-cache –trace –force –update layout.scss:layout.css
error compass/reset/_utilities.scss (Line 116: Invalid CSS after “elements-of-type”: expected selector, was “(html5-block)”)

添加 comapss complie 的快捷操作

每次编译还要单独开个cmd比较麻烦,有一个简单的方法可以用用

这里写图片描述

项目右上角有个运行命令配置,照图上设置一下,每次编译点几下绿色按钮就行了。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:孝感SEO http://xiaogan.4567w.com

COPYRIGHT © 2015 青岛澄润国际贸易有限公司 ALL RIGHTS RESERVED.

网站地图 技术支持:肥猫科技
精彩专题:网站建设
购买本站友情链接、项目合作请联系客服QQ:2500-38-100