SASS

• 父选择器 &：

//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; }

• @if

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}