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 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>