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-width: 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-width: 3px
}

 

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

$name:foo;

$attr:border;

p.#{$name} {

　　#{$attr}-color:blue;

}

// 编译为：

p.foo {

　　border-color:blue;

}

 

函数指令 (Function Directives)

$grid-width:40px;

$gutter-width:10px;

@function grid-width($n) {

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

}

#sidebar{ width: grid-width(5); }

 

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

#sidebar{

　　width:240px;

}