CSS Custom Properties

body {
  --box-color: #4d4e53;
  --box-padding: 0 10px;
}

声明custom properties

使用custom properties

.box {
    color: var(--box-color);
}
.anotherbox {
    padding: var(--box-padding);
}

也叫 CSS Variables

😛小问题：为什么规范要选择“--“作为前缀？

:root {
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);

  /* Valid CSS custom properties can be reused later in JavaScript. */
  --foo: if(x > 5) this.width = 10;
}

任何合法的 CSS 属性值都可以作为 custom property的值：

a color, a string, a layout value, even an expression

.box {
    --box-color:#4d4e53;
    --box-padding: 0 10px;

    /* 10px is used because --box-margin is not defined. */
    margin: var(--box-margin, 10px);
}

var() 可以传入第二个参数作为默认值

可以使用现有的 variables 定义新的 variable

.box {
    padding: var(--box-padding, var(--main-padding));
    --box-text: 'This is my box';

    /* Equal to --box-highlight-text:'This is my box with highlight'; */
    --box-highlight-text: var(--box-text)' with highlight';
}

:root{
    --indent-size: 10px;

    --indent-xl: calc(2*var(--indent-size));
    --indent-l: calc(var(--indent-size) + 2px);
    --indent-s: calc(var(--indent-size) - 2px);
    --indent-xs: calc(var(--indent-size)/2);

    --spacer: 10;
}

.box{
    padding: var(--spacer)px 0; /* DOESN'T work */
    padding: calc(var(--spacer)*1px) 0; /* WORKS */
}

使用 calc() 获得计算值

和一般的 CSS properties 一样，custom properties 也具有层叠性

.box {
    --box-color: green;
}

div {
    --box-color: red;
    --background-color: yellow;
}

div.box {
    color: var(--box-color);
    background: var(--background-color);
}

custom properties 具有继承性

.box {
    --box-color: green;
}

.box > .sub {
    color: var(--box-color);
}

😛小问题：常见的 CSS 属性中，哪些具有继承性，哪些没有？

感受一下与预处理器中的变量作用域的差别

感受一下与预处理器中变量作用域的差别

$globalVar: 10px;

.container {
    $containerVar: 20px;

    .sub {
        $subVar: 30px;

        font-size: $globalVar + $containerVar + $subVar;
    }
}

预处理区不知道 HTML 结构

和一般的 CSS properties 一样，custom properties 是

动态的

$globalVar: 10px;

.container {
    $containerVar: 20px;

    .sub {
        $subVar: 30px;

        font-size: $globalVar + $containerVar + $subVar;

        $subVar: 40px;
    }
}

:root {
    --globalVar: 10px;
}

.parent {
    --parentVar: 20px;
}

.sub {
    --subVar: 30px;

    font-size: calc(var(--subVar) + var(--parentVar) + var(--globalVar));

    --subVar: 40px;
}

custom properties 使用场景

模拟单个属性：translateX/Y/Z box-shadow-color

.test {
  --box-shadow-color: yellow;
  box-shadow: 0 0 30px var(--box-shadow-color);
}

.test:hover {
  --box-shadow-color: orange;
  /* Instead of: box-shadow: 0 0 30px orange; */
}

页面主题切换

custom properties 使用场景

解耦 CSS 与 JavaScript

function readCssVar(element, varName){
    const elementStyles = getComputedStyle(element);
    return elementStyles.getPropertyValue(`--${varName}`).trim();
}

function writeCssVar(element, varName, value){
    return element.style.setProperty(`--${varName}`, value);
}

CSS 负责样式，JavaScript 负责逻辑，JavaScript 通过 custom properties 传递参数

.button {
  position: relative;
  transform: scale(1);
}
 
.button.js-toggled {
  transform: scale(1.5);
}

const button = document.querySelector('.button');
button.addEventListener('click', () => {
  button.classList.toggle('js-toggled');
});

CSS Custom Properties

By yiliang_wang

CSS Custom Properties

CSS Custom Properties

More from yiliang_wang