CSS变量和@property

CSS变量 var()

CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。（比如 color: var(--main-color);）。

基本用法

CSS变量定义的作用域只在定义该变量的元素及其后代元素中有效。如果需要在整个页面中使用该变量，可以将其定义在:root中

声明一个局部变量：

element {--main-bg-color: brown;
}

使用一个局部变量：

element {background-color: var(--main-bg-color);
}

Mdn Web Docs

声明一个全局 CSS 变量：

:root {--global-color: #666;--pane-padding: 5px 42px;
}

使用一个全局 CSS 变量：

.demo{color: var(--global-color);}

开始使用CSS变量

让我们从这个简单的例子开始，拥有不同类名的元素有相同的颜色：

.one {color: white;background-color: brown;margin: 10px;width: 50px;height: 50px;display: inline-block;
}.two {color: white;background-color: black;margin: 10px;width: 150px;height: 70px;display: inline-block;
}
.three {color: white;background-color: brown;margin: 10px;width: 75px;
}
.four {color: white;background-color: brown;margin: 10px;width: 100px;
}.five {background-color: brown;
}

把它应用到下面这段HTML：

<div><div class="one"></div><div class="two">Text <span class="five">- more text</span></div><input class="three"><textarea class="four">Lorem Ipsum</textarea>
</div>

注意CSS中重复的地方，brown的背景色作用在不同的元素上面。我们可以将背景色定义在更高的层级，然后通过CSS继承解决这个问题。在某些情况下，这种方法不一定可行。定义一个变量在:root伪类上，使用变量来减少重复的代码

:root {--main-bg-color: brown;
}.one {color: white;background-color: var(--main-bg-color);margin: 10px;width: 50px;height: 50px;display: inline-block;
}.two {color: white;background-color: black;margin: 10px;width: 150px;height: 70px;display: inline-block;
}
.three {color: white;background-color: var(--main-bg-color);margin: 10px;width: 75px;
}
.four {color: white;background-color: var(--main-bg-color);margin: 10px;width: 100px;
}.five {background-color: var(--main-bg-color);
}

只需要规范地声明所需的属性，就能得到和上面例子相同的结果

CSS变量的继承

自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素：

<div class="one"><div class="two"><div class="three"></div><div class="four"></div><div>
</div>

定义下面的CSS：

.two { --test: 10px; }
.three { --test: 2em; }

在这个例子中，var(--test)的结果是：

class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (inherited from its parent)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值

在JS中修改变量

// 获取根元素
var r = document.querySelector(':root');// 创建获取变量值的函数
function myFunction_get() {// Get the styles (properties and values) for the rootvar rs = getComputedStyle(r);// Alert the value of the --blue variablealert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}// 创建设置变量值的函数
function myFunction_set() {// Set the value of variable --blue to another value (in this case "lightblue")r.style.setProperty('--blue', 'lightblue');
}

在Vue中配合数据动态修改css变量

<template><div><span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span></div>
</template><script>
export default {name: '',components: {},props: {},data() {return {list: [{ text: '"中"', color: 'red' },{ text: '"华"', color: 'orange' },{ text: '"人"', color: 'yellow' },{ text: '"民"', color: 'orange' },{ text: '"共"', color: 'green' },{ text: '"和"', color: 'cyan' },{ text: '"国"', color: 'blue' }]};}
};
</script><style lang="scss" scoped>
span::after {content: var(--text);background-color: var(--color);
}
</style>

@property

使用模板：

@property --property-name 中的 --property-name 就是自定义属性的名称，定义后可在 CSS 中通过 var(--property-name) 进行引用
syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型
- 支持的 syntax 语法类型:
  - length
  - number
  - percentage
  - length-percentage
  - color
  - image
  - url
  - integer
  - angle
  - time
  - resolution
  - transform-list
  - transform-function
  - custom-ident (a custom identifier string)
- syntax 中的 +、#、| 符号
  - syntax: '<color>#' ：接受逗号分隔的颜色值列表 --img-url:url(img01.png),url(img02.png);
  - syntax: '<length>+' ：接受以空格分隔的长度值列表 --padding:0 10px;
  - syntax: '<length> | <length>+'：接受单个长度或者以空格分隔的长度值列表
  - syntax: '<percentage> | <angle>'; 使用百分比也可以使用角度

inherits：是否允许继承
initial-value：初始值

<style>
@property --property-name {syntax: '<color>';inherits: false;initial-value: #fff;
}p {color: var(--property-name);
}
</style>

在 script 中使用 CSS.registerProperty

<script>
CSS.registerProperty({name: "--property-name",syntax: "<color>",inherits: false,initialValue: "#c0ffee"
});
</script>

示例

使用 linear-gradient 实现 transition 效果，但是 transition 并不会对 linear-gradient 生效

原代码

    <style>.line {margin: 0 auto;width: 300px;height: 24px;border: 1px solid rgba(128, 128, 128, 0.14);border-radius: 12px;box-sizing: border-box;background: linear-gradient(to right, #00ffc8 0, #ffffff 0);transition: all 0.3s;&:hover {background: linear-gradient(to right, #00ffc8 0, #ffffff 260px);}}</style><div class="line"></div>

使用 @property 修改后

    <style>@property --l {syntax: "<length>";inherits: false;initial-value: 0;}.line {--l: 0px;margin: 0 auto;width: 300px;height: 24px;border: 1px solid hsla(0, 0%, 50%, 0.137);border-radius: 12px;box-sizing: border-box;background: linear-gradient(to right, #00ffc8 0, #ffffff var(--l));transition: --l 0.3s;&:hover {--l: 260px;}}</style><div class="line"></div>