乐趣区

关于前端:前端-CSS-变量简介及基本使用方法

jiezi

背景

简单的网站都会有大量的 CSS 代码，通常也会有许多反复的值。

举个例子，同样一个色彩值可能在成千上百个中央被应用到，如果这个值产生了变动，须要全局搜寻并且一个一个替换，效率不高且容易出错。

自定义属性在某个中央存储一个值，而后在其余许多中央援用它。另一个益处是语义化的标识。比方，--main-text-color 会比 #00ff00 更易了解，尤其是这个色彩值在其余上下文中也被应用到。

概念

自定义属性 （有时候也被称作CSS 变量 或者 级联变量）是由 CSS 作者定义的，它蕴含的值能够在整个文档中重复使用。

由自定义属性标记设定值（比方：--main-color: black;），由 var() 函数来获取值（比方：color: **var(--main-color)**;）。

劣势

在构建大型站点时，作者通常会面对可维护性的挑战。在这些网页中，所应用的 CSS 的数量是十分宏大的，并且在许多场合大量的信息会重复使用。

例如，在网页中保护一个配色计划，意味着一些色彩在 CSS 文件中屡次呈现，并被重复使用。当你批改配色计划时，不论是调整某个色彩或齐全批改整个配色，都会成为一个简单的问题，不容出错，而单纯查找替换是远远不够的。

如果应用了 CSS 框架，这种状况会变得尤其蹩脚，此时如果要批改色彩，则须要对框架自身进行批改。

在这些场合应用 LESS 或 Sass 相似的预处理器是十分有帮忙的，然而这种通过增加额定步骤的形式，可能会减少零碎的复杂性。

CSS 变量为咱们带来一些预处理器的便当，并且不须要额定的编译。

这些变量的第二个劣势就是名称自身就蕴含了语义的信息。CSS 文件变得易读和了解。main-text-color 比文档中的 #00ff00 更容易了解，特地是同样的色彩呈现在不同的文件中的时候。

用法

上面是 CSS 变量的应用办法和步骤。

CSS 中申明变量

咱们都晓得，在 JS 中要应用一个变量前，必须申明这个表变量。在 CSS 中也是一样的情理。

申明一个自定义属性，属性名须要以两个减号（--）开始，属性值则能够是任何无效的 CSS 值。和其余属性一样，自定义属性也是写在规定集之内的，如下：

body {
    --bg-color: #7F583F;
    --color: #F7EFD2;
}

下面代码中，body选择器外面申明了两个变量：--bg-color和--color。

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

规定集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实际是定义在根伪类 :root下，这样就能够在 HTML 文档的任何中央拜访到它了：

:root {--main-bg-color: #eee;}

自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性。

CSS 中应用变量

通过 var() 函数来读取变量。语法如下:

var(custom-property-name, value)
  • name (必须) 变量名（以两条破折号结尾）。
  • value (可选) 示意变量的默认值。如果该变量不存在，就会应用这个默认值。

变量名称必须以两个破折号（–）结尾，且辨别大小写！

应用办法：

element {background-color: var(--main-bg-color);
}

变量也能够应用在变量申明中：

:root {
  --primary-color: #eee;
  --primary-bg-color: var(--main-bg-color);
}

变量值只能用作属性值，不能用作属性名。

JS 操作 CSS 变量

在 JS 代码中，咱们可能须要读取 CSS 变量的值，其办法如下：

const root = document.querySelector(":root");
// 设置 CSS 变量
root.style.setProperty("--main-bg-color", "red");
// 读取 CSS 变量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 删除 CSS 变量
root.style.removeProperty("--main-bg-color");

总结

以上就是对于 CSS 变量的一些基本概念及应用办法，更多详情待后续！

灵便应用 CSS 变量，不仅能够进步生产力，也可能进步代码的可浏览性和维护性。

~

~

~ 本文完

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！

退出移动版