• 父選擇器 &：

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