认识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的安装
重新安装 wdm
 
Temporarily enhancing PATH to include 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

后记,先按照一般的方法安装,在一般方法出错情况下再安装以上的方法 例如 --pre
use compass watch instead of sass --watch sass:stylesheets. If you're using compass, you don't need to bother with sass command. Just use the compass command.

这里说的是你如果使用compass 就不要是用 sass 命令来监控文件的变动了

windows下的SASS/Compass的安装与卸载的更多相关文章

  1. Windows下Mysql解压缩版配置安装与卸载

    安装: ①解压Mysql到合适的位置! ②以管理员身份运行命令提示符(cmd),cd C:\Documents and Settings\Administrator\桌面\mysql-5.6.24-w ...

  2. windows下配置lamp环境(1)---安装Apache服务器2.2.25

    window下lamp成为wamp; 安装wamp环境的第一步是安装Apache服务器.下面开始安装步骤图文并茂. 一.双击安装包点“next”进行下一步,然后同意协议(这张图没有截):

  3. Windows下的lua-5.3.4安装过程

    Windows下的lua-5.3.4安装过程 Mingw平台下的编译过程: $ make echo$ make mingw$ make local $ make echo PLAT= none CC= ...

  4. Windows下当地RabbitMQ服务的安装

    Windows下本地RabbitMQ服务的安装 本文参考:刘若泽相关技术文档 当然这些内容页可以通过RabbitMQ官方网站获得. RabbitMQ配置说明手册 一.RaibbitMQ服务器配置 1. ...

  5. Windows 下 MySql 5.7.20安装及data和my.ini文件的配置(转)

    Windows 下 MySql 5.7.20安装及data和my.ini文件的配置     本文通过图文并茂的形式给大家介绍了MySql 5.7.20安装及data和my.ini文件的配置方法. my ...

  6. windows下python常用库的安装

    windows下python常用库的安装,前提安装了annaconda 的python开发环境.只要已经安装了anaconda,要安装别的库就很简单了.只要使用pip即可,正常安装好python,都会 ...

  7. windows下使用cpanm进行模块安装

    windows下使用cpanm进行模块安装 要放假了,突然想整理一下手头上的软件,突然发现perl的安装模块这个功能不能用. 弄了一下,使得windows 下 perl 的 cpanm能用,避免成天为 ...

  8. windows下mysql 8.0.12安装步骤及基本使用教程

    本文实例为大家分享了windows下mysql 8.0.12安装步骤及使用教程,供大家参考,具体内容如下 补充:mysql 已经更新到了 8.0.19,大致步骤和这个差不多,照着来就完事了. 我下载的 ...

  9. 安装选择msi格式还是zip(windows下Nodejs zip版下载安装及环境变量配置)

    安装选择msi格式还是zip((windows下Nodejs zip版下载安装及环境变量配置)) -----以node.js 安装为例: 1,外观对比: ✿ 简单介绍一下node的作用: • node ...

随机推荐

  1. java初学的几个问题

    1. 请问配置JDK时环境变量path和JAVA_HOME的作用是什么? 作用:告诉操作系统编译器运行的路径和生成的类路径.这样java源程序才可以进行编译和运行. 以下4-7题请在JDK环境下编译和 ...

  2. IOS 10适配https 包含对于一些http的一些兼容配置

    iOS10 从2017年1月1日起苹果提出所有新提交的App默认不允许使用NSAllowsArbitraryLoads来绕过ATS的限制,也就是说强制我们用HTTPS,如果不这样的话提交App可能会被 ...

  3. Lua代码解析-写给C和C++开发人员

    lua语言作为一门轻量级脚本语言,能够非常好的被嵌入到应用程序,因此,在移动游戏开发中举足轻重 然后C/C++开发人员转lua并非非常习惯,我也是..所以,一起努力学习lua吧 lua没有类的概念,有 ...

  4. JS操作JSON总结(转)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  5. linuxcon-europe 2015 linux大会

    http://events.linuxfoundation.org/events/archive/2015/linuxcon-europe

  6. 关于IB_DESIGNABLE / IBInspectable的那些事

    前言 IB_DESIGNABLE / IBInspectable 这两个关键字是在WWDC 2014年”What’s New in Interface Builder”这个Session里面,用Swi ...

  7. Demo1_iOS9网络适配_改用更安全的HTTPS

    iOS9把所有的http请求都改为https了:iOS9系统发送的网络请求将统一 使用TLS 1.2 SSL.采用TLS 1.2 协议,目的是 强制增强数据访问安全,而且 系统 Foundation ...

  8. eclipse引入jar类包的源代码

    为了方便查看源代码,有时候需要对jar类包,引入源代码. 下载源代码 源代码是zip或者rar的压缩包 引入到项目中

  9. 关于redhat6的服务说明

    服务名称 功能 默认 建议 备注说明 NetworkManager 主要用于图形网络连接管理 开启 关闭 对服务器无用 abrt-ccpp Automated Bug Reporting Tool 开 ...

  10. 替换SQL Server数据库中所有表的所有字段的某些内容

    declare @t varchar(255),@c varchar(255)  declare table_cursor cursor for select a.name,b.name  from  ...