欢送有趣味的小伙伴，一起做点有意义的事！
我发动了一个周刊翻译打算，仓库地址，拜访地址
当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、github纯熟应用、有恒心、虚心、对本人做的事负责。
想参加的小伙伴，能够wx私信，也能够给仓库发issue留言，我博客也有具体的集体联系方式：daodaolee.cn
什么是CSS自定义属性？
CSS的自定义属性等同于JS中的let,它能够用来定义在款式中重复使用的属性。
同时他依然恪守CSS的级联规定。
这就意味着咱们能够给自定义属性定义默认属性值，而后依据须要来进行笼罩。
能够在属性后面加两个破折号来实现自定义属性--my-property
在应用CSS函数 var() 进行调用
上面的例子定义了一个--color的自定义属性
并将其用于color的属性值
.btn{ --color: blue; color: var(--color);}它们与预处理器变量有何不同？
尽管像Sass和Less这样的预处理器早已将变量投入生产，然而在编译后的样式表中，生成的值依然是不变的。
预处理器中的变量更实用于在款式中反复，但不须要在编译后更改的属性值。
而对于通过内联款式笼罩和样式表上下文动静更改的属性值来说，自定义属性更具劣势
此外，如果咱们应用预处理器给按钮设置字体色彩，当咱们应用相似:hover之类的变更按钮的字体色彩时，就只能将属性值从新指向另一个预处理器变量。
换句话说，咱们不能在预处理器变量定义后再去更改它的值，然而CSS自定义属性能够通过级联规定做到这点。
预处理器变量的另外一个劣势在于，能够定义为字符串在任意中央应用，例如媒体查问的断点，或者是如下的选择器字符串
// $classes: ".class-a, class-b" !default;#{$classes} { // 定义 CSS 属性}为什么要应用自定义属性？
让咱们通过之前的按钮例子来答复这个问题。
如果我想在悬停时更改按钮文本和边框的色彩，就能够间接更改--color值。
请留神咱们如何将var()函数仅用作值的一部分，在本例中，用于定义border-color。
.btn { --color: blue; color: var(--color); border: 2px solid var(--color); padding: 0.25em 0.5em; border-radius: 0.25em; text-decoration: none;}.btn:hover { --color: red;}应用自定义属性设置默认值
CSS函数var()既能够调用自定义属性，也能够设置默认值。如下：
var(--color, blue)咱们甚至能够将一个自定义属性设置为默认值，让咱们来写一个不同版本的.btn类
把 --color 当作 --border-color 的默认值
.btn-v2 { --color: blue; color: var(--color); border: 2px solid var(--border-color, var(--color)); padding: 0.25em 0.5em; border-radius: 0.25em; text-decoration: none;}.btn-v2:hover { --border-color: red;}自定义属性的继承
依据之前对自定义属性的介绍，
可能会让大家认为自定义属性该当全副保留到:root选择器上
我要提议的是，在 :root选择器上，该当只保留真正的全局属性
而自定义属性要尽可能的靠近其被调用的中央
另一个关键点在于，通过CSS计算函数如calc()等中应用自定义属性值时，
会让最终计算值继承
计算出的最终值如果保留在:root选择器上，那么将无奈对其进行更改
如下，尽管:root选择器中的--unit被笼罩了，
然而--size-lg失去的是最终值，所以margin-top--3xl的上外边距仍为30px
:root { --unit: 10px; --size-lg: calc(3 * var(--unit));}/* 这将不会使 --size-lg 的值从新计算 */.margin-top--3xl { --unit: 30px; margin-top: var(--size-lg);}解决这种继承问题通常采纳:root选择器和其余选择器相结合的形式
在上面的例子中，因为.margin-top--3xl的--margin-unit和--multiplier属性笼罩了.margin-top相应的属性，所以margin-top达到了一种动静的成果
:root { --unit: 10px;}.margin-top { --margin-unit: var(--unit); --multiplier: 1; margin-top: calc(var(--multiplier) * var(--margin-unit));}.margin-top--3xl { --margin-unit: 30px; --multiplier: 3;}div[class*="margin"] { background-color: dodgerblue; color: white; padding: 0.5rem; font-size: 1.5rem;}咱们也能够在我的项目中应用未定义的自定义属性来使我的项目更加灵便
未定义的益处在于能够从任何先人元素继承值
应用未定义属性时咱们通常有以下两个选项：
- 属性未定义并没有默认值，这有些像被赋予了
unset
例如：color: var(--color) - 属性未定义然而有默认值，当没有继承值时就会应用默认值
例如：color: var(--color, blue)
应用JavaScript援用和定义自定义属性
JavaScript操控CSS自定义属性的利用场景：
- CSS动画的变换值
- 响应式布局的视口尺寸
- 任何不能在CSS中独自获取的值
- 代替不受反对的CSS属性
要在JavaScript中拜访自定义属性的值，须要应用getComputedStyle()和getPropertyValue()。
getComputedStyle(element).getPropertyValue("--my-var");接下来咱们将应用JavaScript获取段落的宽度。而后将其作为色调值调配给hsl()色彩函数
.js-color { background-color: hsl(var(--hue), 100%, 80%); color: black; font-size: 1.5rem; padding: 1rem;}.js-color::after { content: " Current: " attr(style);}const p = document.querySelector('.js-color');const setColor = () => p.style.setProperty('--hue', p.offsetWidth);window.onresize = setColor;setColor();将预处理器变量和CSS自定义属性联合应用
将预处理器变量和自定义变量联合应用，能够充分发挥出两者的劣势
咱们这里拿Sass举例，将Sass变量作为自定义属性值，能够应用如下插值的方法
--custom-property: #{$sass-var};在平时的工作中，像是品牌主题色之类的性能。
咱们能够应用Sass的!default设置一个默认值，这意味着该值是能够笼罩的。
而后，咱们能够将其用作于自定义属性值，咱们还能够利用Sass的其余性能（例如循环）来生成相似的属性组。
$color-link: blue !default;$font-sizes: ( "small": .875rem, "normal": 1rem, "medium": 1.25rem, "large": 2rem) !default;:root { --color-link: #{$color-link}; @each $size, $value in $font-sizes { --font-size-#{$size}: #{$value}; }}相干链接
CSS Custom Properties
翻译打算原文