共用與繼承 Extends, Inhreitance

官方宣稱最方便、有用的方法，但我覺得參數比較有用ＸＤ，可以把重複寫的同樣設定延伸到要套用的 class 上，而且只會將有用到的 extends 輸出成 css，如果有些部分目前沒有使用到，就不轉換輸出，這樣可以有效減少 css 的行數，優化整體的呈現效果。

語法的話蠻簡單的，要 extend 的部分前面加上 %[你的 extend 名稱]，要使用的時候再 @extend [你的 extend 名稱]即可，跟 mixin 很像，只是不能帶入參數，整體會比較簡單明瞭～

實作

// extend.sass
%fish-size
    min-width: 20px
    min-height: 10px
    color: yellow
    margin: 20px
    font-style: italic

.normal-fish
    @extend %fish-size
    color: red
.fat-fish
    @extend %fish-size
    color: green
    font-size: 120px
    padding-right: 20px

.small-fish
    @extend %fish-size
    font-size: 10px
    padding-left: 20px

這次的範例來用可愛的魚示範，首先我們在 extend.sass 中新增 fish-size 這個即將要 extend 的項目，讓所有的魚有個基本的設定，像是顏色、大小、間距等等，之後我們再來分別新增不同的魚種，像是肥魚、小魚，他們都延伸了 fish-size 的 extend，但是又有各自的個體設定。

// App.js
import "./App.css";
import "./assets/sass/extend.sass";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div>
          <div className="normal-fish">ζ°)))彡</div>
          <div className="fat-fish">ζ°)))彡</div>
          <div className="small-fish">ζ°)))彡</div>
          <div className="small-fish">ζ°)))彡</div>
          <div className="small-fish">ζ°)))彡</div>
          <div className="normal-fish">ζ°)))彡</div>
          <div className="small-fish">ζ°)))彡</div>
          <div className="fat-fish">ζ°)))彡</div>
          <div className="normal-fish">ζ°)))彡</div>
          <div className="small-fish">ζ°)))彡</div>
        </div>
      </header>
    </div>
  );
}

export default App;

之後在 App.js 中引入檔案，並且畫上魚魚，然後套用不同魚種的 class。

你就獲得了一群，都有著斜斜的身體、相同的間距，但是顏色大小各自不同的魚群！

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？