SASS绝对新手入门教程

SASS绝对新手入门教程
来源: 比比推分类信息网作者:http://www.bbtui.org 2013-03-23 09:33

什么是SASS?
SASS英文意思是Syntactically Awesome Stylesheets Sass，最早由Hampton Catlin开
发和设计。SASS是一种帮助你简化CSS工作流程的方式，帮助你更容易的维和和开发CSS
内容。

如果你不明白为什么用SASS，你可以先看看这篇文章为什么需要将SASS和Compass
融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

最 简单的例子，你是不是经常需要使用“查询”和“替换”功能来修改CSS文件中某一个
16进制的颜色？或者是打开一个计算器来计算多列设计中的列宽？ SASS介绍了一个新的

概念例如，variables，mixins，镶套或者是选择器继承。 从外形上看起来，非常像CSS，
但是并没有分割号或者大括号。

看看下面这个简单的CSS：
#skyscraper_ad
{
display： block;
width： 120px;
height： 600px;
}
#leaderboard_ad
{
display： block;
width： 728px;
height： 90px;
}
如果你需要使用SASS，则如下代码：
#skyscraper_ad
display： block
width： 120px
height： 600px
#leaderboard_ad
display： block
width： 728px
height： 90px
SASS使用双空格的缩进来定义代码镶套结构。这里你可以大体的了解SASS的样子，
下面我们将介绍为什么SASS如此的棒！

如果你需要更多了解SASS，可以查看这篇内容为什么需要将SASS和Compass融入
CSS代码开发流程。

变量
在SASS中使用美元符号定义一个变量，在这个例子里，一个美元自负，变量名字加上
一个冒号定义一个变量。

$red： #FF4848
当然，在SASS中有一些内建的功能，例如，darken，lighten来帮助你修改变量。下
面例子里，我们使用lighten方法来生成段落中更亮的红色：

$red： #FF4848 $fontsize： 12px h1 color： $red p color： lighten（$red， 10%）
在SASS中你还可以使用加减的方式来修改变量的值，如下：
p.addition_and_subtraction color： $red - #101 font-size： $fontsize + 10px
镶套
两种类型的镶套：
选择器镶套
这是第一个镶套类型。镶套类似我们在html中使用的方式。
$fontsize： 12px
.speaker
.name
font：
weight： bold
size： $fontsize + 10px
.position
font：
size： $fontsize
如果你看看生成的CSS代码，你可以看到如果镶套的.name class位于.speaker class中，
生成的CSS选择器.speaker .name

.speaker .name {
font-weight： bold;
font-size： 22px; }
.speaker .position {
font-size： 12px; }
属性镶套
这是第二个镶套的类型：
你可以使用同名前缀来镶套属性
$fontsize： 12px
.speaker
.name
font：
weight： bold
size： $fontsize + 10px
.position
font：
size： $fontsize
在上面的例子中，我们可以看到font属性后添加了一个双空格缩进，接下来是weight
和 size，这将会生成font-weight和font-size属性，如下：

.speaker .name {
font-weight： bold;
font-size： 22px; }
.speaker .position {
font-size： 12px; }
所有的CSS连接符的属性都支持。使用这种属性的镶套方式，可以帮助你有效的组织
CSS的结构。

Mixins
Mixins是另外一个SASS的超棒属性，允许你高效的重用你的一些SASS的代码片段，
甚至可以传递参数并且指定缺省的值。
定义mixins只需要使用@mixin关键字，然后是你需要使用的代码部分。如果你需要使
用任何的参数，包含一对括号和参数即可。如果你希望使用缺省值，添加一个冒号即可。

包含一个mixin也非常简答，使用@include关键字，后面跟随着Mixin名称和任何括
号中定义的参数即可。如下：

@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：
h1 {
-moz-border-radius： 2px;
-webkit-border-radius： 2px;
border-radius： 2x; }
.speaker {
-moz-border-radius： 5px;
-webkit-border-radius： 5px;
border-radius： 5px; }
我们指定了h1中的radius，但是对于.speaker我们没有指定任何内容。所以会使用缺
省的5px。
选择器继承
选择器继承允许你告诉任何选择器从另外一个选择器继承所有的样式，非常棒的一个特
性。

使用它需要指定关键字@extend，后面跟随一个你喜欢继承的选择器，然后所有的选择
器的样式将会被继承。

h1 border： 4px solid #ff9aa9 .speaker @extend h1 border-width： 2px
以上代码将会被编译成如下CSS：
h1， .speaker { border： 4px solid #ff9aa9; } .speaker { border-width： 2px; }
调试SASS
在线调试：你可以不安装而使用SASS的在线调试来尝试SASS的超棒特性。
安装使用：如果你有Ruby gems你只需要简单运行gem install sass即可。
你可以输入如下命令：
sass --watch sass_folder:stylesheets_folder
其中sass_folder是你的sass文件的目录，stylesheets_folder是生成的css的目录。
--watch选项意思是将会关注这个目录，如果我们修改了任何文件，保存后将会被自动的转

化。

将CSS转化成SASS
你可以在已经存在的项目中使用sass-convert。
输入你需要转换的目录并且输入：
sass-convert --from css --to sass -R .
其中-R意思是递归， . 意思是当前目录
关于SCSS(SASSY CSS)
这里我们只介绍了SASS语法。然而，这里有一个叫做SCSS(Sassy CSS)的更新的格式。
区别在于Sassy CSS看起来更像我们在CSS中使用的样子，但是也有类似 variable，mixins，
镶套和选择器继承的特性。
总结
SASS是一个超棒的保持CSS结构话的好工具，这里甚至有一些项目例如 Compass使
用mixins来包含CSS框架而不是将无任何语义的CSS插入你的HTML中。但是不论如何，
相信你会喜欢这个超棒的CSS工具的，还想什么，在下一个项目中尝试一下它吧！

以上内容来自爱喇叭信息,http://www.ailaba.com.cn，来源:郑州月嫂作者:http://www.zgqqbb.com
提供！