sass简介_动力节点Java学院整理

$fontsize: 12px
.speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

从以上的例子中可以看出，我们让font:另起一行，并且给了两个空格的缩进，然后，就可以设置原来带连字符的属性了。
所以当我们以上面的格式书写font的属性weight时，这种格式会自动生成css属性font-weight:

.speaker .name {
font-weight: bold;
font-size: 22px; }
.speaker .position {
font-size: 12px; }

所有带连字符的选择器都支持以上格式。

像这种类型的嵌套对于你组织和结构化你的css是一种神奇的方法，同时，它还可以减少没有必要的代码重复。

混合

混合是另一种让人着迷的Sass特性。

混合能够使你重用一整段Sass代码，你甚至能够给他们传递参数，同时，你还能够确定默认的值，这也是十分酷的！

定义一个混合，需要用到@mixin关键字，后面跟上你为混合选择的名字。如果你需要一些参数，在名字后面，添加一对括号，并在括号中定义你的参数变量。如果你需要默认值，可以再参数后面添加冒号和你想要的默认值。

使用混合是容易的，通过调用@includSass关键字，后面跟着混合名和用括号包含的参数值。

下面是例子：

@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中设定了值，而.speakr中，因为没有设定值，所以radius中的值为默认值。
We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.

选择器继承

选择器继承能够让你实现选择器可以继承其他选择器中的所有样式，这也是让人欲罢不能的！
为了能够实现它，需要使用@extend关键字，后面跟着你想要继承的选择器，这样，想要继承的选择器中的样式都会在被继承选择器中实现。

h1
border: 4px solid #ff9aa9
.speaker
@extend h1
border-width: 2px

上面的将会编译为如下的css

								 
 2/3   首页 上一页 1 2 3 下一页 尾页