sass 速查手册(part2)

6. 使用选择器继承来精简CSS;

.error {
border: 1px solid red;
background-color: #fdd;
}

.error a{
color: red;
font-weight: 100;
}
h1.error {
font-size: 1.2rem;
}

.seriousError {
@extend .error;
border- 3px;
}

////-------------

.error, .seriousError {
border: 1px solid red;
background-color: #fdd
}

.error a, .seriousError a {
color: red;
font-weight: 100
}

h1.error, h1.seriousError {
font-size: 1.2rem
}

.seriousError {
border- 3px
}

 

插值：#{} （Interpolation：#{}）

$name:foo;

$attr:border;

p.#{$name} {

　　#{$attr}-color:blue;

}

// 编译为：

p.foo {

　　border-color:blue;

}

函数指令 (Function Directives)

$grid-40px;

$gutter-10px;

@function grid-width($n) {

　　$return $n * $grid-width + ($n - 1) * $gutter-width;

}

#sidebar{ grid-width(5); }

//----------

#sidebar{

　　240px;

}