iT邦幫忙

2021 iThome 鐵人賽

DAY 9
1
Modern Web

SASS 基礎初學三十天系列 第 9

DAY 09 Extends, Inhreitance

共用與繼承 Extends, Inhreitance

官方宣稱最方便、有用的方法,但我覺得參數比較有用XD,可以把重複寫的同樣設定延伸到要套用的 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。

Untitled

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


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

lu23770127 - SASS 基礎初學三十天

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

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

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

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


上一篇
DAY 08 Nesting
下一篇
DAY 10 Partials, Modules
系列文
SASS 基礎初學三十天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-09-24 16:38:52

斜斜的身體相同的間距(?

Tilda iT邦新手 4 級 ‧ 2021-09-25 10:18:49 檢舉

怎ㄌ

我要留言

立即登入留言