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"对应的节点:10pxclass="three" 对应的节点: element:2emclass="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 root
var rs = getComputedStyle(r);
// Alert the value of the --blue variable
alert("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>
CSS变量和@property - 掘金
