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

参考这篇文章:

http://blog.csdn.net/zhouzme/article/details/45059419

补充内容:

  1. 安装 SASS 和 Compass

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

  1. 安装目录存在空格

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

@""C:\Program Files\Ruby22-x64\bin\ruby.exe"
改成
@"C:\Program Files\Ruby22-x64\bin\ruby.exe"
  1. 找不到 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)”)

  1. 添加 comapss complie 的快捷操作

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

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

大概就这样了吧,浪费了两天时间

PHPStrom使用SASS,SCSS和Compass的更多相关文章

  1. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  2. 前端利器:SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  3. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  4. sass/scss 和 less对比

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  5. Sass&Scss入门 选择器 混合器 导入 条件判断 迭代

    Sass 基于ruby的一种将脚本解析成CSS的脚本语言.也可以说是一种预处理语言. Sass在css的语法基础上增加了变量.嵌套.混合.继承.导入等高级功能. 使用Sass与Sass样式库(如com ...

  6. 【Sass/SCSS】预加载器中的“轩辕剑”

    [Sass/SCSS]预加载器中的"轩辕剑" 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 随着前端 ...

  7. 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  8. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  9. Sass & Scss & CSS3

    Sass & Scss & CSS3 Sass & Scss @mixin & @include & @import & variable https: ...

随机推荐

  1. javaproject积累——java 反射 invoke

    铅: 在java工程,我们已经听到很多ORM的概念,我一直耿耿于怀,如何从上rs转换成了对象呢?难道要写非常多的推断吗?答案肯定是否定.我们就要探索怎么解决问题,刚好在研究我们系统底层架构的时候,挖掘 ...

  2. WPF随手小记之二 ——改变DataGrid样式

    大部分时候我们并不需要手动改变DataGrid的样式,因为用默认的其实也看得过去,而且在DataGrid中的数据也远比外观重要. 但总有时候,我们需要做点必要的UI修改来使DataGrid更美观. 一 ...

  3. Android中常用的颜色

    代码: <?xml version=”″ ?> <resources> <color name=”white”>#ffffff</color><! ...

  4. VS 文件自动定位功能

    在Visual Studio 中,当你在所有打开的文件中进行切换时,在Solution Explorer中也会自定定位到这个文件的目录下面,这个功能用来查找当前文件是非常有用.在Tools->O ...

  5. 个人总结js客户端验证

    //郭泽峰个人总结总结(2012-12-5): //备注:当 regu是字符串时应示例对象RegExp,否则的话 var emailReg =/在此加上正则/ //验证邮箱 function Chec ...

  6. .Net组件程序设计

    .Net组件程序设计之上下文 在后续篇幅的远程调用的文章里有说到应用程序域,那是大粒度的控制程序集的逻辑存在,那么想对对象的控制又由谁来做主呢?没错了,就是上下文.CLR把应用程序域更细化了,在应用程 ...

  7. Json.Net6.0

    Json.Net6.0入门学习试水篇   前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表 ...

  8. 简单的三层asp.net webForm使用Ninject实现Ioc

    简单的三层asp.net webForm使用Ninject实现Ioc 在asp.net webform下使用Ninject的简单过程. 首先建立个项目,如下图,简单三层(PS:UI层要同时引用BLL. ...

  9. Django解决 'ascii' codec can't encode characters in position

    问题: 文件上传可以上传英文,无法上传中文的. 解决方法:对Apache进行配置 在/etc/apache2/envvars文件加上: export LANG='en_US.UTF-8'export ...

  10. EasyUI DataGrid及Pagination

    接上一篇EasyUI项目驱动学习 DataGrid数据表格及Pagination分页一起介绍 一.通过<table>标记创建DataGrid,嵌套<th>标签定义列表 < ...