[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


<<:  Day06 UIKit 05 - 纯代码编写 Code

>>:  【Day21】补上data-test属性及判断Component和按钮及数字是否正确显示(╯✧∇✧)╯

Day 11 运算宝石：EC2 储存资源 EBS Types 方案比较

今天我们要来介绍 EBS Type方案比较，那我们开始吧! 在之前的文章中我们有提过，EBS 相对...

[Day04] 安装 IDE 与 .NET SDK

开发 .NET 程序之前，需要安装两个东西： IDE: 让我们编写程序与 debug .NET SD...

Day-09 说明public，protected 与 private 的差别?

在 Ruby 里 public，protected 与 private 都是存取限制的方法。 他们的...

.Net Core Web Api_笔记01

.net core web api 可以和任何前端Client端技术或框架(javascript ,...

Day14 - BST ( Find & Insert )

大家好，我是长风青云。今天是铁人赛第十四天。恭喜你们听到我带点磁性的声音(?) 我要滚去休息了。 ...