Sass - 繼承

繼承（Extend）

• 繼承可以用 CSS 選擇器 或 % 開始命名

  使用普通的 CSS 規則，最後會編譯出很多用不到的樣式，也容易與其他樣式名衝突，所以，Sass 引入了「佔位選擇器」(placeholder selectors)，它看起來很像普通的 id 或 class 選擇器，只是 # 或 . 被替換成了 %，可以像 class 或者 id 選擇器那樣使用，當它們單獨使用時，不會被編譯到 CSS 文件中。

• @extend 可以賦予繼承某個 % 或 選擇器所定義的樣式。
• 繼承相同樣式的選擇器在編譯後會以群組選擇器的方式合併在一起。
• 避開 @extend 不使用，就連 Bootstrap 的原始碼中也不怎麼使用 @extend 這手法。

// 繼承 @extend
h1 {
  font-family: '微軟正黑體';
  color: #222;
}
h2 {
  @extend h1;
  border-top: 1px solid #444;
}

h3 {
  @extend h1;
  magin-left: 20px;
}
// 編譯後 css，相同的繼承在編譯後會被合併
h1,
h2,
h3 {
  font-family: '微軟正黑體';
  color: #222;
}
h2 {
  border-top: 1px solid #444;
}
h3 {
  magin-left: 20px;
}

• 範例

// scss
a:hover {
  text-decoration: underline;
}
.hoverlink {
  @extend a:hover;
}

// css
// 編譯後 css，相同的繼承在編譯後會被合併
a:hover,
.hoverlink {
  text-decoration: underline;
}

• 繼承樣式會以群組選擇器表示

// scss
.error {
  border: 1px #f00;
  background-color: #fdd;
}

.attention {
  font-size: 3em;
  background-color: #ff0;
}

.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
  width: 100px;
  height: 100px;
}

// css
.error,
.seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.attention,
.seriousError {
  font-size: 3em;
  background-color: #ff0;
}

.seriousError {
  border-width: 3px;
  width: 100px;
  height: 100px;
}

• 連續繼承（不需要到這麼複雜）

// scss
.error {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
// css
.error,
.seriousError,
.criticalError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError,
.criticalError {
  border-width: 3px;
}

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}