Sass新手指南
http://www.cn-sass.com/%E8%AF%91%E6%96%87/the-absolute-beginners-guide-to-sass.html
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
h1
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
h1
@include border-radius(2px)
.speaker
@include border-radius
|
上面的Sass代码将转译成下面的CSS代码:
1
2
3
4
5
6
7
8
9
10
|
h1 {
-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
|
h1
border: 4px solid #ff9aa9
.speaker
@extend h1
border-width: 2px
|
上面的Sass代码将转译成下面的CSS代码:
1
2
3
4
5
6
7
|
h1,
.speaker {
border: 4px solid #ff9aa9;
}
.speaker {
border-width: 2px;
}
|
尝试Sass
网上尝试
如果你的本地电脑没有安装Sass,你可以在网上尝试使用。
在转译之前,你需要选择底部的“Indented Syntax”选项。
安装
Sass是一个Ruby gem。如果你的本地已经安装了Ruby gems,那么可以在你命令终端直接运行:
1
|
gem install sass
|
Sass也可以使用命令行工具将Sass文件转译成CSS文件。
你可以键入sass --watch sass_folder:stylesheets_folder
,这个时候你的Sass文件(文件扩展名必须是.sass
)stylesheets_folder
就会把转译的样式文件保存在sass_folder
目录,当然你的Sass文件必须保存在这个文件目录中。--watch
选项的意思就是将这个目录中的Sass文件转译成样式文件。
CSS转换成Sass
在现有的项目中通过sass-convert
使用sass。
在终端进入你的目录中,键入sass-convert --from css --to sass -R .
。将CSS转换成Sass。其中-R
表示递归,.
表示当前目录。
Scss
在这里我们只介绍了Sass的语法,然后还有一个新的名称叫SCSS或者Sassy CSS。不同的是SCSS看起来更像CSS,但他也像Sass一样具有变量、混合、嵌套和选择器继承等特性。
总结
在你组织和管理CSS时,Sass真的很优秀。还有个项目Compass,它在CSS框架中使用混合模式,而不是去修改你的HTML结构或者重新定义你的类名。
那你还在等什么呢?在你的下一个项目中就尝试使用Sass吧。