PHPStrom使用SASS,SCSS和Compass
以前尝试 SASS 的时候写了一篇安装方法,大部分操作还是相同,下面补充一些内容主要是填坑,实在太TMD坑爹了。
参考这篇文章:
http://blog.csdn.net/zhouzme/article/details/45059419
补充内容:
- 安装 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中输入
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比较麻烦,有一个简单的方法可以用用
项目右上角有个运行命令配置,照图上设置一下,每次编译点几下绿色按钮就行了。
大概就这样了吧,浪费了两天时间
PHPStrom使用SASS,SCSS和Compass的更多相关文章
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- 前端利器:SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
- [转]前端利器:SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
- sass/scss 和 less对比
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- Sass&Scss入门 选择器 混合器 导入 条件判断 迭代
Sass 基于ruby的一种将脚本解析成CSS的脚本语言.也可以说是一种预处理语言. Sass在css的语法基础上增加了变量.嵌套.混合.继承.导入等高级功能. 使用Sass与Sass样式库(如com ...
- 【Sass/SCSS】预加载器中的“轩辕剑”
[Sass/SCSS]预加载器中的"轩辕剑" 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 随着前端 ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- Sass & Scss & CSS3
Sass & Scss & CSS3 Sass & Scss @mixin & @include & @import & variable https: ...
随机推荐
- GridView中的编辑和删除按钮,执行更新和删除代码之前的更新提示或删除提示
在GridView中,可以通过设计界面GridViewr任务->编辑列->CommandField,很简单的添加的编辑和删除按钮 在前台源码中,可以看到GridView自动生成了两个列. ...
- Android项目--Json解析
在过去的一段时间里,我希望做一个天气的应用,但是由于老版的天气接口已经不能用了.只能更新到2014年3月4日. 不过有些东西,哪来学习一下,也是可以的. 比如:http://m.weather.com ...
- 手机新闻网站,掌上移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发
我们坐在地铁,经常来查看新浪手机新闻,腾讯新闻.或者刷微信看新闻更多功能.你有没有想过如何实现这些目标.移动互联网,更活泼. 因为HTML5到,jQuery Moblie到.今天我用jqm为了给你一个 ...
- Effective C++(11) 自我赋值(a=a)时会发生什么?
问题聚焦: 自我赋值看似有点愚蠢的行为,其实总会发生的 首先:它是合法的, 其次,它不一定是安全的, 再次,它有时候不是那么明显. 先看一个Demo class Widget { ... }; Wid ...
- T4模版
T4模版 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结构,生成文本的一个方式来生成代码! 为了替代重复的劳动, ...
- xquery
XQuery 相对于 XML,等同于 SQL 相对于数据库.设计用来查询 XML 数据.- 不仅仅限于 XML 文件,还包括任何可以 XML 形态呈现的数据,包括数据库. FLWOR 是 " ...
- PLAN: 入门题目
一道道刷完它! A07, A11, A12, A14, A15, A18, A22, A24, A25, A26, A27 A29, A32, A34, A59, A66, A69, A84, B24 ...
- [Usaco2008 Feb]Eating Together麻烦的聚餐[最长不下降子序列]
Description 为了避免餐厅过分拥挤,FJ要求奶牛们分3批就餐.每天晚饭前,奶牛们都会在餐厅前排队入内,按FJ的设想所有第3批就餐的奶牛排在队尾,队伍的前端由设定为第1批就餐的奶牛占据,中间的 ...
- GLIBC_2.7升级
GLIBC_2.7: ftp://ftp.ntua.gr/pub/FreeBSD/ports/distfiles/rpm/i386/fedora/8/glibc-2.7-2.i386.rpm ftp: ...
- soket.io.js + angular.js + express.js(node.js)
soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...