DAY 08 Nesting

嵌套 Nesting

当你在编辑一个 html 档案时，巢状结构的架构可以让你快速了解，每个区块里面的内容物是什麽，藉此去建构一个完整的网页，但是在单纯的 css 上，却没有这种巢状的样式，让整体可读性、style 设定弹性降低很多。

SASS 的 Nesting 方式，让 css 可以更直觉地去建造我们想要的样式架构，像是在 body 里，针对 ul、li、a 等统一设定 body 的通用字型，再分别去设定各自的字体颜色，这样的规划可以加速我们开发的时间，让重复相同的 style 不用一直重写。

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

实作

Untitled

首先来新增一个 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;

Untitled