今天，CSS预处理器是Web开发的标准。 预处理器的一个主要优点是它们使您能够使用变量， 这有助于您避免复制和粘贴代码，并简化了开发和重构。

在本文中，您将了解到如何将CSS变量集成到CSS开发工作流程中，这会使得样式表更易于维护和不重复性。

现在，让我开始吧！

1* css变量的语法

<1> 什么是css变量？

如果您使用过任何一种编程语言，那么您应该已经熟悉了变量的概念。 变量允许您存储和更新程序所需的值以便工作。

在CSS中使用变量的好处与在编程语言中使用变量的好处并没有太大的不同。

以下是规范对此的说法：

[Using CSS variables] makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.

W3C Specification .

[使用CSS变量]可以更容易地读取大文件，因为看似任意的值现在具有信息性名称，并且使得编辑此类文件更容易且更不容易出错，因为只需要在自定义属性中更改一次值 ，这种更改将自动传播到所有使用该变量的地方。

<2>css自定义变量语法

要声明变量而不是常用的CSS属性（如颜色或填充），只需提供以 - - 开头的自定义命名属性：

.box{
  --box-color: #4d4e53;
  --box-padding: 0 10px;
}

属性的值可以是任何有效的CSS值：颜色，字符串，布局值，甚至是表达式。

以下是一些有用的自定义属性：

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
  /* Valid CSS custom properties can be reused later in, say, JavaScript. */
  --foo: if(x > 5) this.width = 10;
}

如果您不确定 :root，在HTML中它与html相同但具有更高的特异性，相当于全局变量。

<3> css变量的使用

var() 函数

您要通过 var（） 这个 css 函数来使用 css 变量，将 css 变量名传入这个函数：

.box{
  --box-color:#4d4e53;
  --box-padding: 0 10px;

  padding: var(--box-padding);
}

.box div{
  color: var(--box-color);
}

var() 函数的语法是：
 

var( <custom-property-name> [, <declaration-value> ]? )

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

如果您不确定是否已定义自定义属性并且想要提供用作回退的值，则可以执行此操作。

例如：

color: var(--foo, red, blue); //将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

padding: var(--box-padding, var(--main-padding));

calc()函数

由于我们习惯使用预处理器和其他语言，我们希望在处理变量时能够使用基本运算符。 为此，CSS提供了一个calc（）函数，它使浏览器在对自定义属性的值进行任何更改后重新计算表达式：

:root{
  --indent-size: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}

如果您尝试使用无单位值，则使用calc()函数可以带来很大的方便：

:root{
  --spacer: 10;
}
.box{
  padding: var(--spacer)px 0; /* DOESN'T work */
  padding: calc(var(--spacer)*1px) 0; /* WORKS */
}

css自定义属性的scop

自定义属性也遵守CSS层叠规则。
 

2* 利用js使用css自定义属性

假设您有一个名为 --left-pos 的 CSS 变量，其值为 100px，范围为 CSS 文档中的 .sidebar 类：

.sidebar {
--left-pos: 100px;
}

可以通过如下方式获取 --left-pos 的值：

const sidebarElement = document.querySelector('.sidebar');
const cssStyles = getComputedStyle(sidebarElement);
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
console.log(cssVal); //100px

设置css属性值：

sidebarElement.style.setProperty('--left-pos', '200px');

3* css 变量和预处理变量有什么不同？

在样式化网站时，您可能通过使用Sass和Less等预处理器来使得变量的更具有灵活性。

预处理器允许您设置变量，并在函数，循环，数学运算等中使用它们。这是否意味着CSS变量无关紧要？

不完全是，主要是因为CSS变量与预处理器变量不同。

差异源于CSS变量是在浏览器中运行的真正的CSS属性，而预处理器变量需要被编译成常规CSS代码，因此浏览器对它们一无所知。

这意味着您可以更新样式表文档中的CSS变量，内联样式属性和SVG表示属性，或者选择使用JavaScript 动态 操作它们。对于 CSS 自定义属性的修改，会立马传递到使用到他的地方，而预处理器则无法完成这种行为，因为他们是提前已经编译好了的！

这并不是说你需要在一个或另一个之间做出选择：没有什么能阻止你利用CSS和预处理器变量一起工作的超能力。

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS盒子模型分类怎么分，包括哪些类型

  本篇文章给大家带来了关于css的相关知识，其中主要介绍了css盒子模型以及box-sizing属性的相关问题，box-sizing属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等，下面一起来看一下，希望对大家有帮助。

• CSS的content属性都有哪些使用，你知道多少？

  这篇文章小编给大家分享的是CSS的content属性的相关使用，content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。很多时候，content属性值我们用的最多的就是给个纯字符，其实它还有很多值可供选择文中示例介绍的很详细，感兴趣的朋友可以了解看看，下面让我们一起来学习一下吧！

• CSS子元素宽度限制超过父元素怎样做

  这篇文章主要介绍了纯CSS让子元素突破父元素的宽度限制,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS控制边框长度效果有什么便利的方法

  我们需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果，并且使用起来很方便。这里使用的是微信小程

• 用CSS3如何实现转圈loading动画，方法是什么

  这篇文章主要介绍了css3如何绘制一个圆圆的loading圈的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧