//aaaa
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译为
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
//bbbbbb
#main {
color: black;
&-sidebar { border: 1px solid; } //& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器
}
编译为
#main {
color: black; }
#main-sidebar {
border: 1px solid; }
#main {
$width: 5em !global; //局部变量->全局变量
width: $width;
}
#sidebar {
width: $width;
}
编译为
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
- @extend:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error; // .error
下的所有样式继承给 .seriousError
border-width: 3px;
}
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为
p.foo {
border-color: blue; }
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}