連結擴充套件

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

此程式碼導致 .message-error.message-important 延伸,這意味著它將包含 .message-important.message 的程式碼,因為 .method-important.message 延伸。這導致以下 CSS:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

免責宣告:確保你擴充套件的類只在程式碼中出現一次**,否則 Sass 可能會生成一些混亂,錯綜複雜的 CSS。**