嵌套 Nesting

當你在編輯一個 html 檔案時，巢狀結構的架構可以讓你快速了解，每個區塊裡面的內容物是什麼，藉此去建構一個完整的網頁，但是在單純的 css 上，卻沒有這種巢狀的樣式，讓整體可讀性、style 設定彈性降低很多。

SASS 的 Nesting 方式，讓 css 可以更直覺地去建造我們想要的樣式架構，像是在 body 裡，針對 ul、li、a 等統一設定 body 的通用字型，再分別去設定各自的字體顏色，這樣的規劃可以加速我們開發的時間，讓重複相同的 style 不用一直重寫。

但是 Nesting 也不宜過於肥厚，要注意不可以過度濫用！

實作

首先來新增一個 nesting.sass，並且來實作一個項目列表下，nesting 的 style

$primary-color: #324980
$secondary-color: #398420
$background-color: #e0e0e0

ul
    color: $primary-color
    background-color: $background-color
    width: 50%
    text-align: left

    li
        font-weight: 100

    a
        font-weight: bold
        text-decoration: none
        color: $secondary-color

    span
        color: $secondary-color
        font-size: 15px

為了方便檢視效果，先設定了 primary color、secondary color、background color，在 ul 下的 li、a、span 會一樣套用到 ul 原本的設定值，預設都是 primary color 的顏色，背景色為 background color，寬至少為畫面的５０％，並且都是靠左對齊的。

而 ul 底下的其他 tag，則會在各自套用到自己的 style 設定。

接下來別忘記要在 App.js 中 import nesting.sass，讓我們的 sass 生效

import logo from "./logo.svg";
import "./App.css";
import "./MyFirstSass.sass";
import "./main.sass";
import "./nesting.sass";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>
          this is blue h1
          <a href="http://google.com.tw">test</a>
        </h1>
        <h2>this is variable h2</h2>

        <ul>
          <li>
            first li <span>this is span, smaller than li</span>
          </li>
          <li>second li</li>
          <li>
            third with <a href="https://google.com.tw">link!</a>
          </li>
        </ul>
        <h4>hi</h4>
      </header>
    </div>
  );
}

export default App;

這是執行後的結果，可以看到各自都有乖乖的依照我們巢狀的設定去顯示正確～

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章
lu23770127 - SASS 基礎初學三十天
10u1 - 糟了！是世界奇觀！
juck30808 - Python - 數位行銷分析與 Youtube API 教學
HLD - 淺談物件導向與Design Pattern介紹
SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？