CSS自变量 var()

CSS自变量 var()

CSS 变量是由CSS创作者界定的实体线，其中包括需在全部word里多次重复使用的指定值。应用自定义属性来设置变量名，并用特定 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>