跳到主要内容

4.1-CSS变量和运算

Create by Fall on 27 Sep 2022 Recently revised in 08 May 2023

变量的声明

CSS 自定义属性，即变量

属性名需要以两个减号 -- 开始，值是任何有效的 CSS 值，值的继承同其它 CSS 属性

/* 在 Body 中声明*/
body{
  --main-color:#f0f
}
/* 在 box 中进行使用 */
.box{
  color: var(--main-color)
}
/* 定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了 */
:root{
  --important-color:#c03
}

@property

Experimental：该属性处于试验阶段，后续可能存在调整

@property 扩展了 css 的变量

syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型
- 属性包括：length、number、percentage、length-percentage、color、image、url、integer、angle、time、resolution、transform-list、transform-function、custom-ident (a custom identifier string)
inherits：是否允许继承
initial-value：初始值

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

特殊 `+`、`#`、`|` 符号

@property --property-name {
  syntax: '<color#>';
}
// # 表示可以接受以 , 分割的颜色列表
// '<length+>'
// + 表示可以接受以 <空格> 分割的长度值
// '<length | length+>' 
// 表示接受单个长度，或者是空格分割的长度

示例

@property --houdini-colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
@property --houdini-colorB {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
.property {
  background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
  transition: 1s --houdini-colorA, 1s --houdini-colorB;
  &:hover {
    --houdini-colorA: yellowgreen;
    --houdini-colorB: deeppink;
  }
}

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}
div {
  background: conic-gradient(yellowgreen, yellowgreen var(--per), transparent var(--per), transparent 100%); 
  transition: --per 300ms linear;
  &:hover {
    --per: 60%;
  }
}

JS 中也可以配置 @property 内容

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

calc四则运算

通过添加到宽高之中，使宽高预留出固定的值

height:calc(99px - 2vh)

参考文章

作者	文章名称
chokcoco	CSS @property，让不可能变可能

变量的声明
calc四则运算
参考文章