什么是SASS ？

SASS是CSS的一种预处理器（框架）。SASS可以把我们需要的东西都抽离出来，也可以把CSS中重复的值变成变量。在SASS中，重复的一组样式变成extend的引用，复杂的结果集和各种冗长的私有前缀都可以变成mixins指令……这么说大家可能想象不到SASS的威力，下面我简单列举几个例子：

1.使用SASS，你可以把重复的选择器隔离出去。

[code]

比如这样一段代码：

header[role="banner"] {
margin: 20px 0 30px 0;
border-bottom: 4px solid #333;
}
header[role="banner"] #logo {
float: left;
margin: 0 20px 0 0;
}
header[role="banner"] #logo img {
display: block;
opacity: .95;
}
header[role="banner"] h1 {
padding: 15px 0;
font-size: 54px;
line-height: 1;
font-family: Jubilat, Georgia, serif;
font-weight: bold;
}

用SASS就可以这样写：

header[role="banner"] {
margin: 20px 0 30px 0;
border-bottom: 4px solid #333;
#logo {
float: left;
margin: 0 20px 0 0;
img {
display: block;
opacity: .95;
}
}
h1 {
padding: 15px 0;
font-size: 54px;
line-height: 1;
font-family: Jubilat, Georgia, serif;
font-weight: bold;
}
}

是不是节约了你的时间呢！！

[/code]

2.在SASS中你还可以将样式属性中共同的命名空间部分提取出来共享，比如下面这个例子：

[code]
header h1 {
padding:15px 0;
font-size: 54px;
font-family: jubilat,georgia,serif;
font-weight: bold;
line-height: 1;
}
用SASS你就可以这样写：
header h1 {
padding:15px 0;
font: {
size: 54px;
family: jubilat,georgia,serif;
weight: bold;
}
line-height: 1;
}
[/code]

3.在SASS中还可以使用&这个特殊占位符替代当前父层选择器。

[code]

比如这样一段代码：

a {
font-weight: bold;
text-decoration: none;
color: red;
border-bottom: 2px solid red;
}
a:hover {
color: maroon;
border-color: maroon;
}

用SASS就可以这样写：

a {
font-weight: bold;
text-decoration: none;
color: red;
border-bottom: 2px solid red;
&:hover {
color: maroon;
border-color: maroon;
}
}

[/code]

4.SASS中可以变量（使用$符号）：

[code]

$color-main: #333;
$color-light: #999;
$color-accent: #ea4c89;
$font-sans: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-serif: Jubilat, Georgia, serif;

一旦被定义，它们就可以被调用：

body {
padding: 0 8%;
font-family: $font-sans;
font-size: 100%;
color: $color-main;
background: #fff url(../img/bg.jpg) repeat-x -80% 0;
}
[/code]

5.关于SASS中的mixinx：

[code]

直接看例子吧：

@mixin title-style {
margin: 0 0 20px 0;
font-family: $font-serif;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
一旦定义完，我们就可以用@include指令在任何地方调用这个mixin插入样式：
section.main h2 { @include title-style; }
这两段代码相当于：
section.main h2 {
margin: 0 0 20px 0;
font-family: $font-serif;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
此外：mixinx中也可以定义参数：
@mixin title-style($color, $background) {
margin: 0 0 20px 0;
font-family: $font-serif;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: $color;
background: $background;}
然后，这个mixin被两个不同的选择器调用，传递了不同的颜色和背景参数：
section.main h2 {
@include title-style(#c63, #eee);
}
section.secondary h3 {
@include title-style(#39c, #333);
}
[/code]

6.关于SASS中的extend:

[code]
.alert {
padding: 15px;
font-size: 1.2em;
text-align: center;
background:#ea4c89;
}
.important {
font-size: 4em;
}
.alert-positive {
@extend .alert;
@extend .important;
background: #9c3;
}
这段代码与下面那段效果相同：
.alert, alert-positive {
padding: 15px;
font-size: 1.2em;
text-align: center;
background: #ea4c89;
}
.important, .alert-positive {
font-size: 4em;
}
.alert-positive {
background: #9c3;
}
[/code]

看了上面这几个例子之后，你是不是对SASS有了一定的了解呢？赶快体验一下高效CSS编程吧！

温馨提示：不建议频繁使用SASS，至于SASS的安装请自己google吧！