css中怎样像less,scss那样定义变量?(:root可用于主题设置)

:root

• 概述:MDN

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。

• 声明全局变量

:root {

--main-color: hotpink;

--main-padding: 5px 42px;

}

• 使用变量:var(color,default)函数第一个参数表示设置的值,第二个表示找不到第一个变量时的值

div{

background-color: var(--main-color);

padding: var(--main-padding);

}

• js修改,获取变量的值

let div = document.querySelector('div')

div.style.setProperty('--main-color', '#f10215')

const value = div.style.getPropertyValue('--main-color')

欢迎评论指正!