Day23：【技术篇】CSS 的变数运用技巧(2)

一、前言

因为 CSS的变数能运用的地方真的很多，所以就分几篇来穿插介绍罗～

二、CSS 的变数运用技巧

1. 在JavaScript使用css变数

// html
<input type="range" min=60 max=400 id="range">
<div class="circle"></div>

// css
:root {
  --primary: Aquamarine;
  --secondary: Teal;
  --size: 200px;
}

// 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() 的括号内即可。

// css
.box-1 {
  width: calc(100% - var(--size));
}

// 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变数计算渐层色彩

// 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))
    )
  );
}

// javascript
const root = document.documentElement;

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

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