以前尝试 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. Lucene.net入门学习

    Lucene.net入门学习(结合盘古分词)   Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,即它不是一个完整的全 ...

  2. WebService和AngularJS实现模糊过滤查询

    WebService和AngularJS实现模糊过滤查询   [概要] 网上看到一个不错的帖子,用WebService获取json,然后在前端使用AngularJs进行过滤搜索,看完文章后,按自己的想 ...

  3. smtp中ehlo的使用

    以前玩smtp的时候申明都是用的helo,最近在整理邮件服务的时候,才知道还有一个叫做ehlo的(太落后了). google了一下,了解了基本上是这么个情况:ehlo是对helo的扩展,即extend ...

  4. 【JS】布尔逻辑

    0 是逻辑的 false 1 是逻辑的 true 空字符串是逻辑的 false null 是逻辑的 false NaN 是逻辑的 false 字符串 'false' 是逻辑的 true Boolean ...

  5. [C#、winform] FormDesigner.cs报错The variable 'xxxxxx' is either undeclared or was never assigned

    背景: 我写了一个App.config配置文件,在里面定义了模块: <add key="key1" value="std1|std2|std3|std4" ...

  6. 开发者所需要知道的iOS7 SDK新特性

    iOS 7 春风又绿加州岸,物是人非又一年.WWDC 2013 keynote落下帷幕,新的iOS开发旅程也由此开启.在iOS7界面重大变革的背后,开发者们需要知道的又有哪些呢.同去年一样,我会先简单 ...

  7. ASP.NET MVC 用户登录Login

    ASP.NET MVC 用户登录Login一.先来看个框架例子:(这个是网上收集到的)  第一步:创建一个类库ClassLibrary831.            第二步:编写一个类实现IHttpM ...

  8. Attempted to lock an already-locked dir异常解决方法

    有时候因网络太慢或中断 就会出现这种锁定状态 Attempted to lock an already-locked dir svn: Working copy 'D:\MyEclipse\mypro ...

  9. Thrift RPC实战(一).初次体验Thrift

    1.前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码,主要特点: 开发速度快: 通过编写RPC接口ID ...

  10. Memcache的一些学习

    Memcache的一些学习 首先,Memcache是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动 ...