SASS 新手指南
- JS插件开发之LightBox图片画廊(上)
- 谈谈CSS性能
- C++远征之起航篇
- Cocos2d-x游戏开发初体验-C++篇
英文原文：teamtreehouse.com，编译：w3cplus – 大漠
什么是Sass？
Sass是一门非常优秀的CSS预处语言，他是由Hampton Catlin创立的。它可以减化CSS的工作流，使开发者更加容易开发，维护CSS样式。
例如，你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼？或者你正在寻找一个计算器为多栏布局的宽度计算而头痛？（不用担心，Sass能帮你解决这样的烦恼）。
本文将介绍Sass的一些基本概念，比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。
Sass和CSS非常相似，但是在Sass中是没有花括号（｛｝）和分号（；）的。
如下面的CSS：
|
1
2
3
4
5
6
7
8
9
10
|
#skyscraper_ad {
display
:
block
;
width
:
120px
;
height
:
600px
;
}
#leaderboard_ad {
display
:
block
;
width
:
728px
;
height
:
90px
;
}
|
在Sass中，上面的CSS代码你要写成下面这样：
|
1
2
3
4
5
6
7
8
|
#skyscraper_ad
display
:
block
width
:
120px
height
:
600px
#leaderboard_ad
display
:
block
width
:
728px
height
:
90px
|
Sass使用两个空格琮定义嵌套的区别。
你现在看过了Sass是如何书写的，接下来我们一起看一些Sass方面的介绍，让Sass在你手中变得不在可怕。
变量（Variables）
在Sass中定义变量，是用“$”符号声明，然后后面跟变量名称。在这个例子中，定义变量“red”，在变量名后使用冒号（：），然后紧跟变量值：
|
1
|
$red:
#ff4848
|
Sass还内置了函数功能，例如变暗（darken）和变亮（lighten），他们可以帮助你修改变量。
在这个例子中，段落要使用一个比“h1”标签更深的红色，就可以这样使用：
|
1
2
3
4
5
6
|
$red:
#ff4848
$fontsize:
12px
h
1
color
: $
red
p
color
: darken($
red
,
10%
)
|
你也可以在相同的变量上做加减运算的操作。如果我们想将颜色变黑，我们也可以在变量的基础上减一个十六进制的颜色，例如“#101”。如果我们想把字号调大“10px”，我们也可以在字号的变量基础上加上这个值。
|
1
2
3
|
/*加法和减法*/
color
: $
red
-
#101
font-size
: $fontsize +
10px
|
嵌套（Nesting）
Sass有两种嵌套规则：
选择器嵌套
选择器嵌套是Sass嵌套规则中的第一种。
Sass的嵌套类似于你的HTML嵌套：
|
1
2
3
4
5
6
7
8
9
|
$fontsize:
12px
.speaker
.name
font
:
weight:
bold
size
: $fontsize +
10px
.position
font
:
size
: $fontsize
|
如果你看了Sass生成的CSS，你可以看到“.name”嵌套在“.speaker”内，这里生成的CSS选择器是“.speaker .name”。
|
1
2
3
4
5
6
7
|
.speaker .name {
font-weight
:
bold
;
font-size
:
22px
;
}
.speaker .position {
font-size
:
12px
;
}
|
属性嵌套
属性嵌套是Sass嵌套的第二种
相同前缀的属性，你可以进行嵌套：
|
1
2
3
4
5
6
7
8
9
|
$fontsize:
12px
.speaker
.name
font
:
weight:
bold
size
: $fontsize +
10px
.position
font
:
size
: $fontsize
|
在上面的例子中，我们有一个“font:”，在新的一行增加两个空格放置他的属性（通常我们看到的是使用连字符“-”来连接）。
因此我们先写“font:”属性，然后断行空两格，写“weight:”属性，在CSS中就变成了“font-weight:”属性。
|
1
2
3
4
5
6
7
|
.speaker .name {
font-weight
:
bold
;
font-size
:
22px
;
}
.speaker .position {
font-size
:
12px
;
}
|
所有连字符的选择器都支持。
这种嵌套用来组织你的CSS结构是非常棒的，可以让你不在写一些重复的代码。
混合（Mixins）
混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码，甚至你可以给他们定义参数，更酷的是你还可以设置默认值。
使用关键词“@mixin”来定义Sass的混合，你可以你自己的喜好定义一个混合的名称。如果你需要设置一些参数，你还可以将参数设置到这些代码片段中；如果你需要设置默认值，你也可以在混合的代码片段中设置默认值。
调用混合代码片段，可以使用Sass中的关键词“@include”调用，并在其后面跟上你的混合代码片段的名称，你还可以使用括号，在里面设置一些参数。
来看一个简单的例子：
|
1
2
3
4
5
6
7
8
|
@mixin border-radius($amount:
5px
)
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount
h
1
@include border-radius(
2px
)
.speaker
@include border-radius
|
上面的Sass代码将转译成下面的CSS代码：
|
1
2
3
4
5
6
7
8
9
10
|
h
1
{
-moz-border-radius:
2px
;
-webkit-border-radius:
2px
;
border-radius:
2px
;
}
.speaker {
-moz-border-radius:
5px
;
-webkit-border-radius:
5px
;
border-radius:
5px
;
}
|
我们给“h1”元素指定了一个特定的圆角值，但是并没有给“.speaker”指定任何值，因此他将使用的是默认值“5px”。
选择器继承
选择器的继承可以让你的选择器继承另一个选择器的所有样式风格，这是一个非常优秀的特性。
使用选择器的继承，要使用Sass的关键词“@extend”，后而跟上你需要继承的选择器，那么这个选择器就会继承另一个选择器的所有样式。（当然他们是有继承和被继承的关系）
|
1
2
3
4
5
|
h
1
border
:
4px
solid
#ff9aa9
.speaker
@extend h
1
border-width
:
2px
|
上面的Sass代码将转译成下面的CSS代码：
|
1
2
3
4
5
6
7
|
h
1
,
.speaker {
border
:
4px
solid
#ff9aa9
;
}
.speaker {
border-width
:
2px
;
}
|
尝试Sass
网上尝试