iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

使用SASS(SCSS)建立自己的CSS Library系列 第 8

[Day 08] Sass - Nesting

Nest CSS with Sass

在Sass中,可以將CSS一層一層的包起來,不但簡單直覺能直接和HTML的結構做對應,也不用一層一層重複寫
舉例來說,正常的CSS是這樣寫的:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

而在Sass可以直接這樣寫:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
  }
}

這種表示方式就稱為Nesting,只需要將子元素的樣式放在各自的父元素中,這樣不但提升了寫CSS時的方便性,也提升了程式碼的可讀性! 如果是第一次使用Sass,相信光這點就能感受到其魅力,用了就回不去了~

最後我們就來做個小練習,來完成一個簡單的Card(卡片)組件吧

首先打開在components內的_card.scss,貼上下面的Code:

// _card.scss

// 卡片
.card {
  display: block;
  padding: $base-padding; // 之前變數的文章有寫,不要忘了
  margin: $base-margin;
  border: 1px solid #ddd;
  box-shadow: $base-box-shadow;
  border-radius: 20px;
  // 卡片標題
  .card-title {
    font-size: $base-font-size;
    padding-bottom: $base-padding;
    font-weight: bold;
  }
  // 卡片內容
  .card-body {
    font-size: $base-font-size;

    a {
      text-decoration: underline;
    }
  }
}

其中我有將陰影和文字大小提成變數,這樣之後要調整就只需要改這邊就好
所以記得在_variables.scss內多宣告變數

// _variables.scss

// font sizes
$base-font-size: 1rem;

// shadow
$base-box-shadow: 1px 3px 5px rgba(0, 0, 0, .1);

樣式都寫好之後就來使用看看吧! 在index.html內寫上:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>[Day08] ITHelp Sass</title>
</head>

<body>
  <!-- Cards -->
  <h2>Cards</h2>
  <div class="card">
    <h1 class="card-title">This is a title</h1>
    <p class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque id necessitatibus repudiandae
      sunt reprehenderit ipsum possimus magni <a href="#">dignissimos quod</a>? Magnam corrupti quaerat doloribus dolore quisquam
      aliquid iusto, libero perferendis tempora.</p>
  </div>

</body>

</html>

接著將專案跑起來就可以在頁面上看到一個精美的卡片了~
https://ithelp.ithome.com.tw/upload/images/20210921/20141363RZhszdgyHA.png


上一篇
[Day 07] Sass - Project Structure
下一篇
[Day 09] Sass - Print
系列文
使用SASS(SCSS)建立自己的CSS Library21

尚未有邦友留言

立即登入留言