擴展/繼承

在 Sass 中也具有繼承一說,也是繼承類中的樣式代碼塊。在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊,從而實現代碼的繼承。如下所示:

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

編譯出來之后:

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

從示例代碼可以看出,在 Sass 中的繼承,可以繼承類樣式塊中所有樣式代碼,而且編譯出來的 CSS 會將選擇器合并在一起,形成組合選擇器:

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

個人覺得繼承能彌補混合宏的不足

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 聲明變量 定義變量的語法: 在有些編程語言中(如,JavaScript)聲明變量都是使用關鍵詞“var”開頭,但是...
    Junting閱讀 1,486評論 0 6
  • 1、SCSS 是 Sass 的新語法格式,從外形上來判斷他和 CSS 長得幾乎是一模一樣,代碼都包裹在一對大括號里...
    夜幕小草閱讀 1,759評論 2 10
  • 再談CSS 預處理器2016-09-09 Justineo JavaScript轉自:http://efe.bai...
    抓住時間的尾巴吧閱讀 1,599評論 0 2
  • 《心屬》2017年約稿函 雜志定位:集古風、青春、神話、魔幻、懸疑、推理、言情于一身的小說集錦雜志。 稿件字數:短...
    心屬雜志社閱讀 334評論 0 0
  • 誰也沒有看見過風 不用說我和你了 但是樹葉顫動的時候 我們知道風在那兒了 誰也沒有看見過風 不用說我和你了 但是樹...
    Jessie啊呆閱讀 2,257評論 0 0