• 切分頁面並使用 SASS 管理樣式

HTML

Sass
// 定義變數
$primary-color: #3498db; // 主色
$secondary-color: #2ecc71; // 副色
$font-family: 'Arial, sans-serif'; // 字體

// Button 部件的樣式
.btn {
background-color: $primary-color; // 使用主色
color: white; // 按鈕文字顏色為白色
padding: 10px 20px; // 設定按鈕的內間距
border: none; // 去掉邊框
border-radius: 5px; // 設定圓角
font-family: $font-family; // 使用定義好的字體
cursor: pointer; // 指針變為點擊樣式

&:hover {
background-color: darken($primary-color, 10%); // 滑過時按鈕變暗
}
}

// Card 部件的樣式
.card {
border: 1px solid lighten($primary-color, 40%); // 使用變亮的主色做為邊框顏色
border-radius: 10px; // 設定圓角
padding: 20px; // 設定內間距
font-family: $font-family; // 使用定義好的字體
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // 添加陰影效果

.card-header {
background-color: $secondary-color; // 使用副色
padding: 15px; // 設定內間距
color: white; // 標題文字顏色
border-bottom: 1px solid lighten($secondary-color, 20%); // 添加底部邊框
}

.card-body {
padding: 15px; // 設定內間距
color: darken($primary-color, 20%); // 內容使用變暗的主色
}
}

• 頁面可以被拆分成可重複用的部件（如 .btn 和 .card），並透過 SASS 管理其樣式，提高程式碼的可維護性和重用性

• 導航欄 (Navbar)： 將頁面的導航設計成可重用的部件，便於在多個頁面間共享樣式
  .navbar {
  background-color: $primary-color;
  padding: 15px;

  .navbar-item {
  display: inline-block;
  padding: 10px;
  color: white;

  &:hover {
  background-color: lighten($primary-color, 10%);
  }
  }
  }

• 表單 (Form)： 可以設計通用的表單部件，並且根據不同的需求調整特定的樣式
  .form {
  display: flex;
  flex-direction: column;
  margin: 10px;

  .form-input {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid darken($primary-color, 20%);
  }

  .form-button {
  padding: 10px 20px;
  background-color: $secondary-color;
  color: white;
  border: none;
  cursor: pointer;
  }
  }