关于前端:CSS-Weekly-486CSS-自定义属性

🥳 欢送有趣味的小伙伴，一起做点有意义的事！

我发动了一个 周刊翻译打算，仓库地址，拜访地址

当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、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;
}

咱们也能够在我的项目中应用未定义的自定义属性来使我的项目更加灵便
未定义的益处在于能够从任何先人元素继承值

应用未定义属性时咱们通常有以下两个选项：

1. 属性未定义并没有默认值，这有些像被赋予了 unset
   例如：color: var(--color)
2. 属性未定义然而有默认值，当没有继承值时就会应用默认值
   例如：color: var(--color, blue)

应用 JavaScript 援用和定义自定义属性

JavaScript 操控 CSS 自定义属性的利用场景：

1. CSS 动画的变换值
2. 响应式布局的视口尺寸
3. 任何不能在 CSS 中独自获取的值
4. 代替不受反对的 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

翻译打算原文