2019-11-18e93e5490fb05dd09fb48b6175fd4a4e6

99+ CSS12 分钟读完 (大约 1755 个字) 0次访问

你所需要了解的CSS变量知识点

大多数的编程语言都支持变量，CSS则从一开始就缺乏对原生变量的支持。好在有 Sass 之类的预处理器，使其在编译时期引入变量。好在 CSS 现在已经支持变量了。尽管预处理增加了对变量的支持，但使用原生的CSS变量也是一个很好的选择，这样可以使我们的页面更加接近未来。下面会介绍 CSS 的用法和一些案例。

CSS变量优点

1. 使代码更具可读性。

很容易就能分辨出使用了可读性和可维护性强的变量代码库。

2. 轻松更改大型文档

如果将所有变量保存在单独的文件中，更改变量的时候，不需要在多个文件之间跳来跳去，只需在单独的文件中更改变量的值就可以了。

3. 可以更快的发现拼写类型错误

搜索可能有错误的代码是一件十分痛苦的事，如果错误是由简单的拼写产生的就更加的难受了，使用变量可以很好的消除这些麻烦。

总的来说，可读性和可维护性是最大的好处。多亏了CSS变量，我们可以在原生的CSS中使用这些变量。

如何定义 CSS 变量

CSS变量通常以两个破折号开头--。CSS变量也成为自定义属性。

.black {
  color: #8cacea;
  --color: blue;
}

在JavaScript中，变量是有作用域的，可能是全局作用域或者局部作用域。CSS变量中也有这样的说法。

1
2
3

:root {
  --main-color: red
}

:root选择器是你可以定位DOM或文档树中的最高级别元素。所以以这种方式声明的变量可以被称作全局作用域的变量。当然，局部作用域的变量也是局单个选择器声明中可以取代全局作用域的变量。

Example 1

假设您想创建一个CSS变量来存储主题网站的原色。你该怎么做呢？

您创建范围选择器。使用:root作为“全局”变量。

:root { }

定义变量。

1	:root { --primary-color: red}

使用 CSS 变量

一旦定义了变量并为其分配了值，就可以继续在属性值中使用它。

在预处理中，我们必须通过引用声明的变量名来使用它。

$font-size: 20px;

.test {
  font-size: $font-size;
}

在原生的CSS变量中，使用方法有所不同。我们通过使用var()函数来引用变量。上例中的写法如下：

:root {
  --font-size: 20px;
}

.test {
  font-size: var(--font-size);
}

CSS变量有许多限制。如，你只能将属性值设置给变量；不能使用数学计算，如果要使用数学计算，需要使用calc()函数。

/*this is wrong */
.margin {--space: 20px * 2;font-size:  var(--space);  //not 40px}

/* right way */
.margin {--space: calc(20px * 2);font-size:  var(--space);  /*equals 40px*/}

属性值的用法

1. 自定义属性是普通属性，因此可以在任何元素上声明它们。

2. CSS变量使用常规继承和级联规则进行解析

1
2
3

div { --color: red; }
div.test { color: var(--color); }
div.ew { color: var(--color); }

3. CSS变量可以使用@media和其他条件规则作为条件

1 2	:root { --gutter: 10px; } @media screen and (min-width: 768px) { --gutter: 30px; }

4. CSS变量可以在HTML的style属性中使用 您可以选择设置内联变量的值，它们仍将按预期运行。

<!--HTML-->
<html style="--color: red">

<style>
body {  color: var(--color)}
</style>

注意，变量声明分辨大小写。尽量使用小写来书写变量。

关于多个声明

与其他属性一样，使用标准级联可以解析多个声明。让我们来看一个例子：

/*define the variables*/
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
/*use the variable */
* { color: var(--color); }

使用上面的变量声明，以下元素的颜色是什么？

<!-- blue -->
<p>What's my color?</p>
<!-- green -->
<div>and me?</div>
<!-- red -->
<div id='alert'>
  What's my color too?
  <!-- red -->
  <p>color?</p>
</div>

上面的最后一个<p>color？</p>你可能期望是blue,但和其他属性一样，CSS变量也是继承的。该值是从父级#alert继承的。

解决循环依赖

循环依赖的发生情况。

1. 何时变量取决于自身。也就是说，它使用引用自身的var（）

1	:root { --m: var(--m)}body { margin: var(--m)}

2.当两个或多个变量相互引用时

:root {
  --one: calc(var(--two) + 10px);
  --two: calc(var(--one) - 10px);
}

注意不要在代码中创建循环依赖关系。

无效变量会发生什么？

语法错误不会报错，但是无效的var()将会替换默认为相关属性的初始值或继承值。

1
2
3

:root { --color: 20px; }
p { background-color: red; }
p { background-color: var(--color); }

如预期的那样，--color被替换为var()，但替换后的属性值background-color：20px无效。由于background-color不是可继承的属性，因此该值将默认为其透明的初始值。

构建字段时要小心

如下所示设置属性的值时，20px被解释为单个标记。

一种简单的输入方法是，将值20px视为一个“实体”。

使用CSS变量构建单个标记时，请务必小心。

例如，考虑以下代码块：

1 2	:root { --size: 20} div { font-size: var(--size)px /WRONG/}

您可能期望font-size的值产生20px，但这是错误的。浏览器将其解释为20 px 注意20后的空格。

因此，如果您必须创建单个令牌，则用一个变量代表整个令牌。例如--size：20px，或使用calc函数，例如calc（var（-size）* 1px），其中--size等于20

使用技巧

1. 使用CSS变量创建组件变体

background: var(--color, black)，如var()函数的第二个属性，设置背景色的回退值。如果变量失效或者不存在，则采用black作为后备选项。

使用CSS变量能够省去很多重复的书写。

2. 具有CSS变量的主题网站

主体CSS，假设给一个按钮绑定事件监听器，一段JS。

body {
  background-color: var(--bg, white);
  color: var(--bg-text, black);
}

js代码：

const root = document.documentElement;
const themeBtns = document.querySelectorAll('.theme > button');themeBtns.forEach((btn) => {
  btn.addEventListener('click', handleThemeUpdate)
});

function handleThemeUpdate(e) {
  switch(e.target.value) {
    case 'dark':
      root.style.setProperty('--bg', 'black');      root.style.setProperty('--bg-text', 'white');
      break;
    case 'calm':
      root.style.setProperty('--bg', '#B3E5FC');       root.style.setProperty('--bg-text', '#37474F');
      break;
    case 'light':
      root.style.setProperty('--bg', 'white');      root.style.setProperty('--bg-text', 'black');
      break;
  }
}

关于浏览器的支持

支持率可以说是非常的好了。

参考

CSS

本文最后修改于: 2020-03-27.

本文标题：你所需要了解的CSS变量知识点
本文作者：hddhyq
本文链接：https://hddhyq.github.io/2019/11/18/你所需要了解的CSS变量知识点/
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！