初识css自定义属性

这算是一篇两篇文章译文的糅合体，旨在帮助理解css自定义属性。

今天，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和预处理器变量一块儿工做的超能力。

Last

参考连接

1. It's Time To Start Using CSS Custom Properties：www.smashingmagazine.com/2017/04/sta…
2. A Practical Guide to CSS Variables ：www.sitepoint.com/practical-g…

撒花～

欢迎关注公众号：CSandCatti，集合英语和前端知识于一身的公众号平台～