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: ...
随机推荐
- Lucene.net入门学习
Lucene.net入门学习(结合盘古分词) Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,即它不是一个完整的全 ...
- WebService和AngularJS实现模糊过滤查询
WebService和AngularJS实现模糊过滤查询 [概要] 网上看到一个不错的帖子,用WebService获取json,然后在前端使用AngularJs进行过滤搜索,看完文章后,按自己的想 ...
- smtp中ehlo的使用
以前玩smtp的时候申明都是用的helo,最近在整理邮件服务的时候,才知道还有一个叫做ehlo的(太落后了). google了一下,了解了基本上是这么个情况:ehlo是对helo的扩展,即extend ...
- 【JS】布尔逻辑
0 是逻辑的 false 1 是逻辑的 true 空字符串是逻辑的 false null 是逻辑的 false NaN 是逻辑的 false 字符串 'false' 是逻辑的 true Boolean ...
- [C#、winform] FormDesigner.cs报错The variable 'xxxxxx' is either undeclared or was never assigned
背景: 我写了一个App.config配置文件,在里面定义了模块: <add key="key1" value="std1|std2|std3|std4" ...
- 开发者所需要知道的iOS7 SDK新特性
iOS 7 春风又绿加州岸,物是人非又一年.WWDC 2013 keynote落下帷幕,新的iOS开发旅程也由此开启.在iOS7界面重大变革的背后,开发者们需要知道的又有哪些呢.同去年一样,我会先简单 ...
- ASP.NET MVC 用户登录Login
ASP.NET MVC 用户登录Login一.先来看个框架例子:(这个是网上收集到的) 第一步:创建一个类库ClassLibrary831. 第二步:编写一个类实现IHttpM ...
- Attempted to lock an already-locked dir异常解决方法
有时候因网络太慢或中断 就会出现这种锁定状态 Attempted to lock an already-locked dir svn: Working copy 'D:\MyEclipse\mypro ...
- Thrift RPC实战(一).初次体验Thrift
1.前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码,主要特点: 开发速度快: 通过编写RPC接口ID ...
- Memcache的一些学习
Memcache的一些学习 首先,Memcache是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动 ...