css 自定义属性（变量） ​

自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --primary-color: #785afa;），由 var() 函数来获取值

基本用法 ​

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的

注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root下，这样就可以在 HTML 文档的任何地方访问到它

:root {
	--cg-input-height: 0.5rem;
	--cg-input-height1: 0.48rem;
	--cg-input-border-radius: 0.08rem;
	--cg-input-font-size: 0.16rem;
	--cg-input-font-size1: 0.18rem;
	--cg-btn-height: 0.56rem;
	--cg-btn-font-size: 0.2rem;
	--cg-btn-border-radius: 0.28rem;
	--cg-select-font-size: 0.18rem;
}

:root {
	--cg-input-height: 0.5rem;
	--cg-input-height1: 0.48rem;
	--cg-input-border-radius: 0.08rem;
	--cg-input-font-size: 0.16rem;
	--cg-input-font-size1: 0.18rem;
	--cg-btn-height: 0.56rem;
	--cg-btn-font-size: 0.2rem;
	--cg-btn-border-radius: 0.28rem;
	--cg-select-font-size: 0.18rem;
}

CSS 变量（又称自定义属性或自定义属性值）可以定义多种类型的值，包括但不限于：

1. 颜色值：比如十六进制颜色值（#ff0000）、RGB（rgb(255, 0, 0)）等。

   css

   :root {
   	--main-color: #ff0000; /* 定义一个颜色值 */
   }

   :root {
   	--main-color: #ff0000; /* 定义一个颜色值 */
   }

2. 长度单位：像素（px）、百分比（%）、视窗宽度单位（vw）、视窗高度单位（vh）等。

   css

   :root {
   	--spacing: 10px; /* 定义一个长度值 */
   }

   :root {
   	--spacing: 10px; /* 定义一个长度值 */
   }

3. 字符串：文字或 URL 等字符串。

   css

   :root {
   	--text: "Hello, World!"; /* 定义一个字符串值 */
   }

   :root {
   	--text: "Hello, World!"; /* 定义一个字符串值 */
   }

4. 数值：整数或小数。

   css

   :root {
   	--opacity: 0.7; /* 定义一个数值 */
   }

   :root {
   	--opacity: 0.7; /* 定义一个数值 */
   }

5. 其他属性的引用：可以使用其他属性值来定义变量值。

   css

   :root {
   	--main-bg-color: var(--main-color); /* 使用另一个变量值定义新的变量值 */
   }

   :root {
   	--main-bg-color: var(--main-color); /* 使用另一个变量值定义新的变量值 */
   }

这些是一些常见的变量值类型，但实际上，CSS 变量可以包含几乎所有 CSS 允许的值类型，这使得它们非常灵活，可以适应各种情况。

值类型 ​

CSS 支持各种不同的值类型，这些值类型可以应用于各种属性。下面是一些常见的 CSS 值类型：

1. 数字值：可以是整数或小数，比如 1、0.5、100 等。

2. 长度值：用于定义尺寸的单位，比如像素 px、百分比 %、视窗单位 vw、vh 等。

3. 百分比值：常用于相对于父元素或其他元素的大小调整，如 width: 50%。

4. 颜色值：十六进制、RGB、RGBA、HSL、HSLA 等。例如 #FF0000、rgb(255, 0, 0)。

5. 字符串值：可以是文本、URL 等，用引号包裹。如 content: 'Hello, World!' 或 url("example.com/image.jpg")。

6. URL 值：通常用于一些属性，比如 background-image，表示资源的路径。

7. 计数值：用于设置项目的计数，如 counter-increment。

8. 函数值：例如 calc()、var() 等，用于执行计算或引用变量。

9. 图像值：用于设置元素的背景图像，如 background-image: url('example.jpg')。

10. 逻辑值：表示逻辑真假，如 display: none、visible。

11. 特定关键字值：例如 initial、inherit、unset，用于特殊设置。

这些值类型可以在不同的属性中使用，且往往可以进行组合使用，使得 CSS 具有非常大的灵活性。

兼容性 ​

点击查看兼容性

var() 函数 ​

var()函数用于读取变量。

a {
	color: var(--foo);
	text-decoration-color: var(--bar);
}

a {
	color: var(--foo);
	text-decoration-color: var(--bar);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7f583f);

color: var(--foo, #7f583f);

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明。

:root {
	--primary-color: red;
	--logo-text: var(--primary-color);
}

:root {
	--primary-color: red;
	--logo-text: var(--primary-color);
}

.foo {
	--side: margin-top;
	/* 无效 */
	var(--side): 20px;
}

.foo {
	--side: margin-top;
	/* 无效 */
	var(--side): 20px;
}