樣式規則

樣式規則是 Sass 的基礎，就像它們是 CSS 的基礎一樣。它們的工作方式也相同：您使用選擇器選擇要設定樣式的元素，並宣告屬性來影響這些元素的外觀。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

       程式碼遊樂場Sass 語法.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

CSS 輸出.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

巢狀巢狀永久連結

但 Sass 想要讓您的生活更輕鬆。您可以將一個樣式規則寫在另一個樣式規則內，而不必一遍又一遍地重複相同的選擇器。Sass 會自動將外部規則的選擇器與內部規則的選擇器組合起來。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

       程式碼遊樂場Sass 語法nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none


CSS 輸出nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

⚠️ 注意！

巢狀規則非常有用，但它們也可能讓您難以視覺化實際產生了多少 CSS。巢狀越深，提供 CSS 所需的頻寬就越多，瀏覽器渲染它所需的工作也就越多。請保持選擇器淺層！

選擇器列表選擇器列表永久連結

巢狀規則可以巧妙地處理選擇器列表（即逗號分隔的選擇器）。每個複雜選擇器（逗號之間的選擇器）分別巢狀，然後再組合回選擇器列表。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

       程式碼遊樂場Sass 語法.alert, .warning
  ul, p
    margin-right: 0
    margin-left: 0
    padding-bottom: 0


CSS 輸出.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

選擇器組合器選擇器組合器永久連結

您也可以巢狀使用組合器 (combinators) 的選擇器。您可以將組合器放在外部選擇器的結尾、內部選擇器的開頭，或者甚至單獨放在兩者之間。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

       程式碼遊樂場Sass 語法ul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8



CSS 輸出ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

進階巢狀進階巢狀永久連結

如果您想對巢狀樣式規則執行更多操作，而不僅僅是使用後代組合器（即普通的空格）將它們按順序組合在一起，Sass 可以滿足您的需求。詳情請參閱父選擇器文件。

插值插值永久連結

您可以使用插值將來自表達式（例如變數和函數呼叫）的值插入到您的選擇器中。這在編寫mixin 時特別有用，因為它允許您根據使用者傳入的參數建立選擇器。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭");

       程式碼遊樂場Sass 語法@mixin define-emoji($name, $glyph)
  span.emoji-#{$name}
    font-family: IconFont
    font-variant: normal
    font-weight: normal
    content: $glyph



@include define-emoji("women-holding-hands", "👭")
CSS 輸出@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

💡 小知識

Sass 只會在插值解析*後*才解析選擇器。這表示您可以安全地使用插值來產生選擇器的任何部分，而不必擔心它無法解析。

您可以將插值與父選擇器 &、@at-root 規則和選擇器函數結合使用，以便在動態產生選擇器時發揮強大的作用。更多資訊，請參閱父選擇器文件。