windows下的SASS/Compass的安装与卸载
认识SASS/Compass
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
SASS与Compass的安装说明
SASS在Windows操作系统内依赖于Ruby环境,因此在安装SASS之前:
1、需要先安装Ruby。Ruby现阶段的安装与一般应用程序安装没有太大区别,环境变量等由安装程序自行设置。
2、Ruby环境内有个包管理器——GEM,它类似于Nodejs下的NPM,它随着Ruby一起被安装,因此不需要额外安装。
安装 Ruby
使用 rubyinstall 安装 ruby
官方网站: http://rubyinstaller.org/
安装好之后需要对ruby换源,因为国内你懂的,参见 https://ruby.taobao.org/ 操作如下 :
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l
如果在换源时提示如下错误信息:

这是ruby没有包含SSL证书,所以Https的链接被服务器拒绝,解决方法很简单,首先在这里下载证书(http://curl.haxx.se/ca/cacert.pem), 或者在浏览器里把这个文件内容复制(或者点击此处下载),服务器创建一个新文件cacert.pem,内容粘贴进去,然后再环境变量里设置SSL_CERT_FILE这个环境变量,在系统的环境变量里设置SSL_CERT_FILE这个环境变量,并把value指向这个文件,退出命令行窗口 重新执行添加命令即可

安装 sass
gem install sass
测试运行编译
sass test.scss test.css
--style
# nested:嵌套缩进的css代码,它是默认值
# expanded:没有缩进的、扩展的css代码。
# compact:简洁格式的css代码。
# compressed:压缩后的css代码。 # watch a file
sass --watch input.scss:output.css
# watch a directory
sass --watch ap/some:some/name
安装compass
gem install compass
创建项目
compass create my-project
cd my-project
compass watch
常见错误
创建 compass 项目报错
compass create my-project
“Errno::EACCES on line [”897“] of C: Permission denied”
LoadError on line ["55"] of D: cannot load such file -- compass/import-once/activate
解决方法:
// uninstall
gem uninstall sass
gem uninstall compass // install pre version
gem install compass --pre
gem install sass --pre
使用 compass 监控项目变动
compass watch
LoadError on line ["55"] of D: cannot load such file -- wdm
解决方法
安装 wdm
gem install wdm
安装 wdm 出错
ERROR: Error installing wdm: The 'wdm' native gem requires installed build tools.
Please update your PATH to include build tools or download the DevKit
from 'http://rubyinstaller.org/downloads' and follow the instructions
at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit'
devKit 包 然后根据 上边给出的地址进行 devKit的安装Building native extensions. This could take a while...
Successfully installed wdm-0.1.0
Parsing documentation for wdm-0.1.0
unable to convert "\x90" from ASCII-8BIT to UTF-8 for ../../extensions/x64-mingw
32/2.0.0/wdm-0.1.0/wdm_ext.so, skipping
unable to convert "\x90" from ASCII-8BIT to UTF-8 for lib/wdm_ext.so, skipping
1 gem installed
windows下的SASS/Compass的安装与卸载的更多相关文章
- Windows下Mysql解压缩版配置安装与卸载
安装: ①解压Mysql到合适的位置! ②以管理员身份运行命令提示符(cmd),cd C:\Documents and Settings\Administrator\桌面\mysql-5.6.24-w ...
- windows下配置lamp环境(1)---安装Apache服务器2.2.25
window下lamp成为wamp; 安装wamp环境的第一步是安装Apache服务器.下面开始安装步骤图文并茂. 一.双击安装包点“next”进行下一步,然后同意协议(这张图没有截):
- Windows下的lua-5.3.4安装过程
Windows下的lua-5.3.4安装过程 Mingw平台下的编译过程: $ make echo$ make mingw$ make local $ make echo PLAT= none CC= ...
- Windows下当地RabbitMQ服务的安装
Windows下本地RabbitMQ服务的安装 本文参考:刘若泽相关技术文档 当然这些内容页可以通过RabbitMQ官方网站获得. RabbitMQ配置说明手册 一.RaibbitMQ服务器配置 1. ...
- Windows 下 MySql 5.7.20安装及data和my.ini文件的配置(转)
Windows 下 MySql 5.7.20安装及data和my.ini文件的配置 本文通过图文并茂的形式给大家介绍了MySql 5.7.20安装及data和my.ini文件的配置方法. my ...
- windows下python常用库的安装
windows下python常用库的安装,前提安装了annaconda 的python开发环境.只要已经安装了anaconda,要安装别的库就很简单了.只要使用pip即可,正常安装好python,都会 ...
- windows下使用cpanm进行模块安装
windows下使用cpanm进行模块安装 要放假了,突然想整理一下手头上的软件,突然发现perl的安装模块这个功能不能用. 弄了一下,使得windows 下 perl 的 cpanm能用,避免成天为 ...
- windows下mysql 8.0.12安装步骤及基本使用教程
本文实例为大家分享了windows下mysql 8.0.12安装步骤及使用教程,供大家参考,具体内容如下 补充:mysql 已经更新到了 8.0.19,大致步骤和这个差不多,照着来就完事了. 我下载的 ...
- 安装选择msi格式还是zip(windows下Nodejs zip版下载安装及环境变量配置)
安装选择msi格式还是zip((windows下Nodejs zip版下载安装及环境变量配置)) -----以node.js 安装为例: 1,外观对比: ✿ 简单介绍一下node的作用: • node ...
随机推荐
- 换种眼光看Spring之bean是怎么诞生的(一)
Java的世界里处处存在了对象,有时候换一种眼光往往会给自己带来与之前大不一样的理解. 一个对象的出现离不开字节码,拿classforname来讲,classforname("...&quo ...
- [Webpack 2] Use Karma for Unit Testing with Webpack
When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to inte ...
- Linux 汇编语言开发指南
http://www.ibm.com/developerworks/cn/linux/l-assembly/
- Matlab 之 im2col
函数原型:B = im2col(A,[m n],block_type) 功 能:将矩阵A分为m×n的子矩阵,再将每个子矩阵作为B的一列. (1)当block_type为distinct时 ...
- 制作win7+ubuntu +winPE+CDlinux多系统启动U盘
制作前期准备工作 1.需要软件 grub4dos(http://sourceforge.net/projects/grub4dos/files/) UltraISO(http://cn.ezbsyst ...
- IE6下Png透明最佳解决方案(推荐) Unit PNG Fix
引自:http://www.yeeyan.org/articles/view/98510/67784 网络上解决IE6下Png透明解决方案有很多,例如 IE PNG Fix from TwinHeli ...
- 重温css系列01
2016-01-07——解决背景层透明度的问题 需要ie9+ 问题:如果我对div设置opacity: 0.8;这个透明属性后 希望内容不发生改变怎么弄? A:做两层,或者rgba 解决后的效果图: ...
- CSS3兼容IE的大杀器
经过长久以来的不懈努力,我终于成功的将selectivizr与PIE这两个解决css3的利器进行了深度的整合,大大降低了使用难度 <!--[if lte IE 9]><script ...
- UpdateProgress使用
UpdateProgress是一个进度显示条,加在AJAX里能显得更加的人性化(个人认为).现在我们就开始吧: 第一.新建一个AJAX项目.在页面上加上ScriptManager,UpdatePane ...
- 学习笔记_过滤器概述(过滤器JavaWeb三大组件之一)
过滤器Filter Filter和Lister是Servlet规范里的两个高级特性.不同于Servlet,它们不用于处理客户端请求,只用于对request.response进行修改或者对context ...