iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

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

[Day 05] Sass - Variables

  • 分享至 

  • xImage
  •  

Variables

在Sass中,開發者可以使用變數,例如可以將常用的顏色、寬度設定成變數,這樣未來如果顏色或寬度要改變時,只需要改掉變數的值,而不用像一般CSS一樣需要到每個地方把顏色或寬度改成新的值~

舉例來說,在Sass裡可以這樣用:

// 宣告變數
$image-max-width: 50px;

// 使用變數
img {
    max-width: $image-max-width;
}

// 宣告變數
$primary: #0058E6;

// 使用變數
h1 {
    color: $primary;
}

直接寫比較有感覺,我們來寫一些常用的變數
打開我們在Day3建立的專案,在main.scss最上面加上:

// main.scss

// colors
$primary: #0058E6;
$secondary: #00F26D;
$warning: #F5BD2D;

// spacing
$base-padding: 0.75rem;
$base-margin: 0.75rem;

h1 {
  color: $primary;
  margin: $base-margin;
}

a {
  color: $secondary;
}

button {
  color: white;
  background: $warning;
  padding: $base-padding;
  display: block;
}

接著修改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>[Day05] ITHelp Sass</title>
</head>

<body>
  <h1>This is an h1</h1>
  <a>This is an anchor tag</a>
  <button>Warning</button>

</body>

</html>

接下來將專案跑起來(終端機輸入gulp編譯sass和用Live Server打開index.html,之後的文章不會再提醒~)
就會看到網頁顯示如下圖
https://ithelp.ithome.com.tw/upload/images/20210918/20141363uIlw8o8WWo.png

恭喜學會了Sass變數的使用,有沒有覺得有了變數之後寫起來更加順手了呢?

上一篇
[Day 04] Sass - 簡介
下一篇
[Day 06] Sass - Partials
系列文
使用SASS(SCSS)建立自己的CSS Library21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言