一、前言

因為 CSS 的變數能運用的地方真的很多，所以就分幾篇來穿插介紹囉～

二、CSS 的變數運用技巧

1. 在JavaScript使用css變數

1
2
3
// html
<input type="range" min=60 max=400 id="range">
<div class="circle"></div>
1
2
3
4
5
6
// css
:root {
  --primary: Aquamarine;
  --secondary: Teal;
  --size: 200px;
}
1
2
3
4
5
6
7
8
// javascript
const root = document.documentElement;

const range = document.getElementById('range');

range.addEventListener('change', function() {
  root.style.setProperty('--size', `${this.value}px`)
})

2. 用Calc計算 css變數

  • CSS 中更有一個神奇的運算方法 calc，此函式可以無視讓不同單位的數值直接做運算，如百分比與絕對單位運算（ex: 100% - 30px）。CSS Variables 也同樣能夠搭配此方法產生新的值。

  • calc 是作為函式使用，因此可將預期運算的方法置入 calc() 的括號內即可。

1
2
3
4
// css
.box-1 {
  width: calc(100% - var(--size));
}
1
2
3
4
5
6
7
8
9
// javascript
const root = document.documentElement;

const range = document.getElementById('range');

console.log(range)
range.addEventListener('change', function() {
  root.style.setProperty('--size', `${this.value}px`);
})

3. 使用css變數計算漸層色彩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// css
:root {
  --c: 255;
}

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(
    rgb(
      calc(var(--c) - 60), calc(var(--c) - 40), calc(var(--c))
    ),
    rgb(
      calc(var(--c) - 20), calc(var(--c) - 10), calc(var(--c))
    )
  );
}
1
2
3
4
5
6
7
8
// javascript
const root = document.documentElement;

const range = document.getElementById('range');

range.addEventListener('change', function() {
  root.style.setProperty('--c', this.value)
})

三、結論與自我鼓勵

從這裡就可以感覺得到，CSS 變數能運用的範圍真的很廣，而且活用成功的話，程式碼也能跟著精簡許多。