SASS绝对新手入门教程_网页设计教程

推荐：关于响应式页面
众所周知，所谓响应式页面，就是能够用一套样式，使你的页面能够在不同分辨率的屏幕下都有很好的表现形式。响应式Web设计，这个概念是Ethan Marctte 在A List Apart 发表的

什么是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，镶套和选择器继承的特性。

总结

分享：经验分享：网页设计中的6个小技巧
工作中,网页设计师经常会遇见这些情况,时间这么短又要出彩,又是要大气要气氛\风格不明确很难把握,栏目这么多页面又这么长,,突然觉得素手无策,怎么办呢