灏天阁

CSS 变量和 @property

· Yin灏

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>

- Book Lists -