Css3变量的使用 | Big-Xiong’s Blog

date

slug

status

兼容性

FireFox	Chrome	Safari	Opera	IOS Safari
> 49	> 49	> 9.1	> 41	>9.3

使用语法

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。变量名称不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文


:root {
  --大熊: #369;
}
body {
  background-color: var(--大熊);
}

CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? )


.box {
  --1: #369;
	--2: #248;
}
body {
  background-color: var(--1, var(--2, #fff));
}

作用域


:root { --color: purple; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>我的紫色继承于根元素</p>
<div>我的绿色来自直接设置</div>
<div id='alert'>
  ID选择器权重更高，因此阿拉是红色！
  <p>我也是红色，占了继承的光</p>
</div>

变量作用域和DOM绑定:

如果是全局变量采用:root { --color: purple; }形式来声明，所有的样式里面都可以使用。

div { --color: green; }局部使用，可以当作是局部变量覆盖全局变量，也可以当作是div的层级优先级更高。会覆盖掉全局的变量值。

JavaScript操作变量


// 获取行内样式的变量名
element.style.getPropertyValue("--variableName");

// 获取样式表里定义的变量
getComputedStyle(element).getPropertyValue("--variableName");

// 设置变量的值
element.style.setProperty("--variableName", value);

特性

CSS变量不合法的缺省特性

CSS默认值的使用仅限于变量未定义的情况，并不包括变量不合法，不合法会使用浏览器默认值

CSS变量的空格尾随特性


// 无效，font-size:20 px 后面会跟个空格
body {
  --size: 20;   
  font-size: var(--size)px;
}
// 推荐
body {
  --size: 20px;   
  font-size: var(--size);
}
body {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}

CSS变量的相互传递特性

变量之间发生联动，只需更改columns就能实现响应式


.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}

应用

黑白模式切换


<body data-theme="light"></body>

// 亮色模式变量
body[data-theme=light]{
	--background-main-color: #fff;
}
// 暗色模式变量
body[data-theme=dark]{
	--background-main-color: #000
}

document.body.setAttribute('data-theme', 'dark')

vue3 css中v-bind的应用


:root{
	--div-height: 100px;
}

const BG-COLOR = '#fff'
const WIDTH = '100px'

<style lang="less" scoped>
@height: var(--div-height);
@width: v-bind(WIDTH);

div{
	--font-size: 20px;
	background-color: v-bind(BG-COLOR); // 本质也是转成css变量 var(--*)的方式使用
	width: @width;
	height: @height;
	font-size: var(--font-size);
}
</style>


:root{
	--div-height: 100px;
}

const style = {
	bg: '#fff',
	width: '100px'
}

<style lang="less" scoped>
$height: var(--div-height);
$width: v-bind('style.width');

div{
	--font-size: 20px;
	background-color: v-bind('style.bg'); // 本质也是转成css变量 var(--*)的方式使用
	width: $width;
	height: $height;
	font-size: var(--font-size);
}
</style>

@proterty 与 css变量的区别

使用css变量是无法实现动画的过渡的，这个时候如果替换成@property就可以实现了


@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}