DAY 09 Extends, Inhreitance

共用与继承 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 - 前端？後端？你早晚都要全端的，何不从现在开始？