sass与compass简单教程

SASS教程

一、ruby安装

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。

ruby官网地址：http://rubyinstaller.org/downloads

ruby -v      #查看当前系统的ruby版本信息，由此也可以判断当前系统是否安装了ruby环境

傻瓜式安装，在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。

二、sass安装

在Win环境下，可以直接运行 cmd 命令，进入CMD命令行。

然后直接在命令行中输入

gem install sass

按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。

三、淘宝RubyGems镜像安装 sass

$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l
*** CURRENT SOURCES ***
 https://ruby.taobao.org # 请确保只有 ruby.taobao.org
$ gem install sass

命令行编译

#单文件转换命令
sass style.scss style.css

#单文件监听命令
sass --watch style.scss:style.css

#文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory

Scss 转Sass

$ sass-convert main.scss main.sass

宿主文件：

主要文件。

如：

screen.scss     #宿主文件

局部文件：

对于不须要编译的文件命名时，用_下划线进行命名。

如:

_variables.scss         #变量申明文件
#在宿主文件中引入时，可以写成:
@import "variables";

@import “text.scss”; 注意，在sass文件中，@import 非css文件中的@import 文件指令，sass已经对@import 进行了重新定义其功能。其意思为：合并并输出到css文件中，可以用在文档的任何地方。

使用css原生的@import 时，须满足以下4个条件，即为原生的@import

1、当@import 后面是跟着.css结尾的时候。

2、当@import 后面跟的是”http://”字符串开头的时候。

3、当@import 后面跟的是一个”url()”函数的时候。

4、当@import 后面跟的是一个media queries 的时候，如: @import “var” projection tv;

SASS规则：

1、当没有文件后缀的时候，sass会添加scss或sass后缀。

2、同一目录下，局部文件和非局部文件不能重名。

SASS引入多个文件(.scss或.sass)

@import "test1","test2";

SASS注释语法：

块注释： /**/

行注释： //

COMPASS教程

四、安装compass

compass为何物？意为：sass样式框架！

compass官网：

http://www.compass-style.org/

$ gem install compass

命令说明

compass create 创建项目名称

按须编译
compass compile [项目路径]

监听编译
compass watch [项目路径]
如不写后面的项目路径，则会监听整个项目文件的变化，进行实时编译
停止监听文件变化：Ctrl + C

目录结构

config.rg     #项目配置说明文件
sass          #sass文件存放目录
stylesheets   #css编译存放目录
javascripts   #javascript文件存放目录
images        #images图片存放目录
....

@charset “utf-8” 说明编码格式.默认为utf-8进行编码，可以不用写在文件中。

sass 文件后缀说明：

*.sass 按严格的缩进方式进行编译，不能有花括号{}

*.scss 按花括号{} 方式进行编译

compass 文件说明

@import url(“compass”); 方式引入进来，默认不包含reset浏览器重置模块和layout布局模块，须要单独引入。

@import "compass/reset";
@import "compass/layour";

compass 文件模块说明：

核心模块：reset、layour

reset #浏览器重置模块

layour #布局模块

css3 #处理跨浏览器css3能力

helpers #内含一系统的函数，跟sass函数很像，比较少用到

typography #修饰文本样式，垂直语韵

utilties #辅助功能模块

browser #用来配置compass支持哪些浏览器，对特定浏览器支持到哪个版本

注意：browser一但修改将会影响到其它6个模块的编译内容。

necolas.github.io/normalize.css/

在sass 文件中，进行压缩编译，保留注释的方法：

在注释中加!感叹号即可，如：

/*!
* 注释内容
*/

如何更新或卸载SASS/Compass？

查找服务器源的更新，你可以在CMD下输入：

gem query –remote

Ruby包貌似允许多个不同版本共存，因此如果你需要更新某个包，直接安装可能不会覆盖旧的版本（SASS与Compass是否会这样未知）。

否则，你需要卸载它：

gem uninstall sass

如果此时你已经安装了多个版本，CMD会提醒你选择卸载：

Select gem to uninstall:
1. deprecated-2.0.1
2. deprecated-3.0.0
3. All versions

如果卸载的gem依赖其他的gem，会有以下提示信息：

You have requested to uninstall the gem:
deprecated-3.0.0
dbi-0.4.3 depends on [deprecated (>= 2.0.0)]
If you remove this gems, one or more dependencies will not be met.
Continue with Uninstall? [Yn]

其他：

更新GEM的版本，可以输入命令：

gem update --system

查看已经安装的GEM包，可以输入命令：

gem list

compass的解决方案

代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错

解决方法是：

找到ruby的安装目录，里面也有sass模块，如这个路径：C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass

在这个文件里面engine.rb，添加一行代码：

Encoding.default_external = Encoding.find(‘utf-8’)

放在所有的require XXXX 之后即可。

最后在scss文件头部启用编码声明：

@charset “utf-8”;//必须设置了这个才能编译有中文的注释

**

插件篇

用normalize 代替 compass/reset ，推荐使用插件的方式引入。

**

安装 normalize

简介：Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。

$ gem install compass-normalize

normalize 核心模块（共8个模块）

base #用来统一html,body标签的字体，文字大小调整，边距等等。

html5 #统一html5新增的元素

links #统一a标签的样式修饰，去除连线

typography #统一段落文本的修饰

embeds #统一img、svg等标签的修饰

groups #统一

forms #统一form等相关的标签修饰

tables #统一table等相关的标签修饰

config.rg 中配置文件之插件说明：

import-noce/activate #解决@import 时重复引入相同文件时，也只引入一次，解决了引入多次的重复代码。引入并启用。 如须要重复引入时，只须要在引入时，加上 @import (“compass/layour!”); 加个感叹号即可。

拓展阅读：

SASS详细教程：

http://www.w3cplus.com/sassguide/index.html