哈Ha！ 我向您介绍Stas Melnikov撰写的文章
“我喜欢CSS自定义属性的五个主要原因”的翻译
CSS定制属性规范永远改变了我对Web开发的看法。 这就是为什么我要写为什么我喜欢自定义CSS属性的原因。
什么是自定义CSS属性？
简而言之，CSS定制属性是开发人员创建的属性。 在开发人员确定它们之前，浏览器对它们一无所知。
任何自定义属性的声明均以两个破折号开头，之后必须添加属性名称。 然后添加颜色并设置属性值。
例如，我创建了属性melnik909BrandColor，其
按钮元素的值为
紫色 ：
button { --melnik909BrandColor: purple; }
Var功能
自定义CSS属性的第一个功能是
var函数。 使用此功能，我可以告诉浏览器采用custom属性的值并将其添加到任何CSS属性。
为此，我必须定义CSS属性并添加该属性的值，在同一位置设置以自定义属性作为参数的
var函数。
例如，我为边框和颜色属性添加了--melnik909BrandColor属性。
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); }
可以直接在浏览器中更改自定义属性
熟悉Sass或LESS之类的经验丰富的读者可能会说：
“不过，为什么我应该学习CSS定制属性？ 我知道Sass变量，对我来说足够了 。
”注意！ Sass和LESS变量有助于组织CSS，以便开发人员更轻松地维护代码。 例如，我创建了一个变量$ melnik909BrandColor，在其中保存了颜色：
$melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; }
编译后，我将在浏览器中看到以下代码：
button { color: purple; border: 2px solid purple; }
此示例显示Sass和LESS变量不在浏览器中。
自定义CSS属性的第二个功能是它们位于浏览器中。 这样，我可以在那里更改值。 例如，我可以为
按钮元素的选择状态更改—melnik909BrandColor属性的值：
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } button:hover { --melnik909BrandColor: #27ae60; }
您可以一起使用自定义CSS属性和媒体查询
自定义CSS属性的第三个功能是可以使用媒体查询来更改其值。 例如，我定义melnik909BrandColor属性以更改不同设备上
body元素的文本颜色。
body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } }
Calc函数和CSS自定义属性
有时我们需要使用
calc函数。 例如，当我需要计算一行中的元素数量时，我喜欢使用此函数：
.child { width: calc(100% / 4); } .child { width: calc(100% / 3); }
但是，此代码很难重用，这里的自定义CSS属性将为我们提供帮助。 我们可以创建一个将读取元素数量的变量。 例如，我将––itemsNumber属性添加到上一个示例中：
.child { width: calc(100% / var(--itemsNumber)); }
我将在
父元素中定义值：
.parent { --itemsNumber: 5; } .parent { --itemsNumber: 7; }
矢量图形定制
有两种使用自定义CSS属性自定义矢量图形的方法。
在第一种方法中，我们定义属性
fill，stroke和stroke-width ，并向它们添加自定义CSS属性作为它们的值。
此外，我们可以通过设置自定义属性的值来添加属性值：
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
现在，我们可以通过设置自定义属性的值来添加属性值：
.svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; }
左边是没有样式的默认图标，右边是有样式的图标。
在第二种方法中，我们使用CSS规则定义
描边，描边宽度和填充属性的自定义CSS属性。
body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }