SASS学习

一、什么是SASS

Sass是是一种基于ruby编写的CSS预处理器，诞生于2007年，是最早也是最成熟的一款CSS预处理器语言，它可以使用变量、嵌套、混入、继承，运算，函数等功能，使得CSS的开发，变得简单清晰可维护，同时也大大节省了设计者的时间，提高了效率。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

如今Sass有两套语法规则：一种缩进作为分隔符来区分代码块；另一种借鉴了less的一些思想，使用大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。

二、SASS的安装

SASS依赖于ruby环境，所以装SASS之前先确认装了ruby,在官网下载个ruby
安装时请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

1.命令行：
gem install sass
按回车键确认，等待一段时间就会提示你sass安装成功。

2.安装beta版本，命令行：
gem install sass –pre

3.从sass的Git repository来安装，git的命令行为:
git clone git://github.com/nex3/sass.git
cd sass
rake install

三、SASS编译

1.koala编译
koala是一款免费的编译器，具有界面简洁，操作方便的特点。

2.命令行编译
单文件转换命令 ：
sass index.scss index.css

单文件监听命令：
sass –watch index.scss:index.css

文件夹监听命令：
sass –watch sassFileDirectory:cssFileDirectory

四、SASS语法

1.导入：

sass的导入(@import)规则和CSS的有所不同：
a)sass中导入.css文件(@import common.css),和CSS文件中导入@import common.css文件效果相同。
b)sass中导入.scss后缀文件，可以省略后缀名

2.注释：

sass有两种注释方式：
a)css方式： /*……*/
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

b)单行注释：//，此种注释不会被编译出来

3.变量：
SASS允许使用变量，所有变量以$开头。

$blue : #1875e7;　div {color : $blue;}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中，如：

$left : leftdiv{border-#{$left}-radius:10px;}

4.计算：
SASS允许在代码中使用算式,如：

$14 : 14px;div{margin:$14*2;position:absolute;top:50px + 50px;left:0;}

5.嵌套：
a)SASS允许选择器嵌套，如

div ul{color:#f00;}

可以写成：

div{ul{color:#f00;}}

b)属性也可以嵌套，如div{border-color:#f00;}可以写成：

div{border:{color:#f00;}}

注意，border后面必须加上冒号。

c)在嵌套的代码块内，可以使用$引用父元素。比如a:hover伪类，可以写成：

a{&:hover {color:#f00;}}

6.混合：
1)Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块，如：

@mixin fl{float:left;}

使用@include重用

div{@include fl;}

2)mixin的强大之处，在于可以指定参数和缺省值，如：

@mixin fl($value : 10px){float:left;margin-right:$value;}div{@include fl(20px);}

3)生成浏览器前缀

@mixin setRadius($vert, $horz, $radius: 10px){border-#{$vert}-#{$horz}-radius: $radius;-moz-border-radius-#{$vert}-#{$horz}: $radius;-webkit-border-#{$vert}-#{$horz}-radius: $radius;}

调用：

#ul li{@include setRadius(left,right);}#ol li{@include setRadius(top,bottom,20px);}

7.继承：
SASS允许一个选择器，继承另一个选择器。如现有

.class1{border:1px solid #f00;}

class2继承class1:

.class2{@extend .class1;//注意此处的点font-size:18px;}

用compact输出方式编译后为：

.class1, .class2 { border: 1px solid #f00; }.class2 { font-size: 100px; }

8.颜色函数：
SASS提供了一些内置的颜色函数，以便生成系列颜色：
1)lighten:通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
lighten(#cc3, 10%) // #d6d65c

2)darken:通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
darken(#cc3, 10%) // #a3a329

3)grayscale:将一个颜色变成灰色，相当于desaturate($color,100%)
grayscale(#cc3) // #808080
4)complement:返回一个补充色，相当于adjust-hue($color,180deg);
complement(#cc3) // #33c

更多颜色函数参见： http://www.w3cplus.com/preprocessor/sass-color-function.html 或官网

9.条件语句：

div{@if 3 < 5 {border:1px solid #f00;}@if 3 > 5 {border:1px solid #00f;}}div{@if 3 < 5{border-raduis:5px;}@else {border-raduis:10px;}}compact方式编译后：div { border: 1px solid #f00; }div { border-raduis: 5px; }

10.循环语句：
1)for循环

@for @i from 1 to 10{.border-#{$i}:background:url('image/#{$i}.png');}编译后：.border-1 { background: url('image/1.png'); }.border-2 { background: url('image/2.png'); }.border-3 { background: url('image/3.png'); }.border-4 { background: url('image/4.png'); }.border-5 { background: url('image/5.png'); }.border-6 { background: url('image/6.png'); }.border-7 { background: url('image/7.png'); }.border-8 { background: url('image/8.png'); }.border-9 { background: url('image/9.png'); }

2)while循环

$i:0@while $i < 5{.class_#{$i}{border:#{$i}px solid #f00;}}编译后：.class_0 { border: 0px solid red; }.class_1 { border: 1px solid red; }.class_2 { border: 2px solid red; }.class_3 { border: 3px solid red; }.class_4 { border: 4px solid red; }

3)each

@each $i in a,b,c,d{.class_#{$i} {background:url('images/#{$i}.png');}}编译后：.class_a { background: url('images/a.png'); }.class_b { background: url('images/b.png'); }.class_c { background: url('images/c.png'); }.class_d { background: url('images/d.png'); }

11.自定义函数：
SASS允许用户编写自己的函数：

@function even($num){@return $num * 2; }.clas_even{width:even(10px);}编译后：.clas_even { width: 20px; }

五、SASS库

1.sassCore
a、sassCore涵盖范围广，目前涉及了setting，reset，mixin，css3，typography，media-queries，grids，helps八个部分。

b、sassCore采用开关机制，对是否支持ie6/7等众多条件可以通过设置为true或false来搞定。

c、sassCore引入最新的sass变量机制，默认变量!default，在应用的时候只需在你引入sassCore文件之前，重新申明变量就ok，而不需要去修改sassCore文件。

d、sassCore引入最新的sass placeholder选择器，如果需要extend样式的时候，避免了先前的class申明，placeholder的优点在于如果你不调用，根本不会解析出样式。

e、sassCore使用新的思想，科学的方法，跟随流行，每一个文件都是经过深思熟虑，几经更改的结晶。

参考地址： https://github.com/marvin1023/sassCore

2.Compass
Compass是Sass的工具库（toolkit）。
Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。Compass应该是目前最成功的sass库吧，功能也是超级强大，但是也很累赘，太复杂了，要想用好，学习成本比较高。
官网地址： http://compass-style.org/

3.bourbon
A simple and lightweight mixin library for Sass.

官网地址: http://bourbon.io/

六、编辑器(sublime text2)插件

sublime text直接安装SASS插件

七、koala编译工具

1.使用koala的优势：
a.多语言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
b.实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作。
c.编译选项：既可统一设置文件的编译选项，也可单独设置某个文件的编译选项。
d.强大的文件右键功能：右键文件元素，即可操作打开文件，打开文件目录，打开输出文件目录，设置输出文件目录，编译，删除六大常用功能。
e.错误提示：在编译时如果遇到语法的错误，koala将在右下角弹出错误信息，方便开发者定位代码错误位置。
f.跨平台：windows、linux、mac都能完美运行。
g.免费且负责：koala完全免费，而且作者很负责，有什么问题作者都会及时给予答复，意见什么的可以直接提交给作者，一般在下一个版本就能得到解决。

2.编译选项介绍
a.自动编译：是否启用自动编译；

b.编译选项：Compass Mode,Line Comments,Debug Info，Unix Lines；

c.输出方式：nested，compressed，compact，expanded;

3.官网地址：
http://koala-app.com/index-zh.html

八、参考链接

SASS官网： http://sass-lang.com/