变量

Thu, 10 Oct 2024 00:00:00 +0800

一、变量的声明

声明变量的时候，变量名前面要加两根连词线（--）。

body {
 --foo: #7F583F;
 --bar: #F7EFD2;
}

上面代码中，body选择器里面声明了两个变量：--foo和--bar。

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做**“CSS 自定义属性”**（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

各种值都可以放入 CSS 变量。

:root{
 --main-color: #4d4e53;
 --main-bg: rgb(255, 255, 255);
 --logo-border-color: rebeccapurple;

 --header-height: 68px;
 --content-padding: 10px 20px;

 --base-line-height: 1.428571429;
 --transition-duration: .35s;
 --external-link: "external link";
 --margin-top: calc(2vh + 20px);
}

变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

二、var() 函数

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

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

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

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

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

变量 on Last Stand

变量

一、变量的声明

二、var() 函数