如果你觉得自己对CSS变量不熟悉，那么可以补充这个！

CSS变量(又名自定义属性)已在Web浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解它们。

创新互联建站为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到成都做网站、成都网站建设， 我们的网页设计师为您提供的解决方案。

简介

CSS变量是在CSS文档中定义的值，其目的是可重用性并减少CSS值中的冗余。下面是一个基本示例。

 
 
 
 
    
  
  
  
  
  1. .section { 
    2.   
  
  
  
  2.   border: 2px solid #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section-title { 
    6.   
  
  
  
  6.   color: #235ad1; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. .section-title::before { 
    10.   
  
  
  
  10.   content: ""; 
    11.   
  
  
  
  11.   display: inline-block; 
    12.   
  
  
  
  12.   width: 20px; 
    13.   
  
  
  
  13.   height: 20px; 
    14.   
  
  
  
  14.   background-color: #235ad1; 
    15.   
  
  
  
  15. } 
    16.

在此代码段中，#235ad1使用了3次。想象一下，对于一个大型项目，不同的CSS文件，如果哪天被要求更改颜色。我们可以做的最好快的方式就是“查找并替换”。

使用CSS变量，可以更快解决这个问题。定义变量名需要用--开头。首先，我们现在将在:root或元素中定义变量。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --color-primary: #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section { 
    6.   
  
  
  
  6.   border: 2px solid var(--color-primary); 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. .section-title { 
    10.   
  
  
  
  10.   color: var(--color-primary); 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. .section-title::before { 
    14.   
  
  
  
  14.   /* Other styles */ 
    15.   
  
  
  
  15.   background-color: var(--color-primary); 
    16.   
  
  
  
  16. } 
    17.

是不是比前面的干净得多?--color-primary变量是全局变量，因为我们在:root元素中定义了它。但是，我们还可以将变量范围限定到整个文档中的某些元素。

命名变量

与编程语言命名变量相似，CSS 变量的有效命名应包含字母数字字符，下划线和破折号。另外，值得一提的是 CSS 变量区分大小写。

 
 
 
 
    
  
  
  
  
  1. /* 合法命名 */ 
    2.   
  
  
  
  2. :root { 
    3.   
  
  
  
  3.  --primary-color: #222; 
    4.   
  
  
  
  4.  --_primary-color: #222; 
    5.   
  
  
  
  5.  --12-primary-color: #222; 
    6.   
  
  
  
  6.  --primay-color-12: #222; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. /* 非法命名 */ 
    10.   
  
  
  
  10. :root { 
    11.   
  
  
  
  11.  --primary color: #222; /* Spacings are not allowed */ 
    12.   
  
  
  
  12.  --primary$%#%$# 
    13.   
  
  
  
  13. } 
    14.

作用域CSS 变量也有自己的作用域，这个概念类似于其他编程语言。以 JS 为例:

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-color: #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section-title { 
    6.   
  
  
  
  6.   --primary-color: d12374; 
    7.   
  
  
  
  7.   color: var(--primary-color); 
    8.   
  
  
  
  8. } 
    9.

变量element是全局的，因此可以在cool()函数内部访问。但是，只能在cool()函数中访问变量otherElement。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-color: #235ad1; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .section-title { 
    6.   
  
  
  
  6.   --primary-color: d12374; 
    7.   
  
  
  
  7.   color: var(--primary-color); 
    8.   
  
  
  
  8. } 
    9.

变量--primary-color是全局变量，可以从文档中的任何地方访问。变量--primary-color由于是在.section-title定义的，所以只能在.section-title中访问。

下面是一个比较直观的示例图片，可以加强我们的理解：

变量--primary-color用于标题颜色。我们想为作者名和最新文章标题自定义颜色，因此我们需要将--primary-color覆盖。这同样适用于--unit变量。

 
 
 
 
    
  
  
  
  
  1. /* 全局变量 */ 
    2.   
  
  
  
  2. :root { 
    3.   
  
  
  
  3.   --primary-color: #235ad1; 
    4.   
  
  
  
  4.   --unit: 1rem; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. /* section-title 默认的颜色和间距 */ 
    8.   
  
  
  
  8. .section-title { 
    9.   
  
  
  
  9.   color: var(--primary-color); 
    10.   
  
  
  
  10.   margin-bottom: var(--unit); 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. /* 覆盖 section-title 样式 */ 
    14.   
  
  
  
  14. .featured-authors .section-title { 
    15.   
  
  
  
  15.   --primary-color: #d16823; 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. .latest-articles .section-title { 
    19.   
  
  
  
  19.   --primary-color: #d12374; 
    20.   
  
  
  
  20.   --unit: 2rem; 
    21.   
  
  
  
  21. } 
    22.

回退方案

这里的回退不是不支持 CSS 变量的回退，而是 CSS 变量可以支持回退方案。考虑以下示例：

 
 
 
 
    
  
  
  
  
  1. .section-title { 
    2.   
  
  
  
  2.   color: var(--primary-color, #222); 
    3.   
  
  
  
  3. } 
    4.

注意，var()有多个值。第二个#221只在变量--primary-color由于某种原因没有定义的情况下有效。不仅如此，我们还可以将var()嵌套到另一个var()中。

 
 
 
 
    
  
  
  
  
  1. .section-title { 
    2.   
  
  
  
  2.   color: var(--primary-color, var(--black, #222)); 
    3.   
  
  
  
  3. } 
    4.

在变量值依赖于某个动作的情况下，该特性非常有用。当变量没有值时，为它提供一个回退很重要。

用例一：控制组件的大小

在设计系统中，按钮通常有多种尺寸。通常，按钮可以具有三种尺寸(Small, normal, large)。使用 CSS 变量来实现它并不容易：

 
 
 
 
    
  
  
  
  
  1. .button { 
    2.   
  
  
  
  2.   --unit: 1rem; 
    3.   
  
  
  
  3.   padding: var(--unit); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. .button--small { 
    7.   
  
  
  
  7.   --unit: 0.5rem; 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. .button--large { 
    11.   
  
  
  
  11.   --unit: 1.5rem; 
    12.   
  
  
  
  12. } 
    13.

通过在按钮组件作用域内更改变量--unit，我们创建了按钮的不同变体。

用例二：CSS 变量和 HSL 颜色

HSL代表色调，饱和度，亮度。色相的值决定了颜色，饱和度和亮度值可以控制颜色的深浅。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-h: 221; 
    3.   
  
  
  
  3.   --primary-s: 71%; 
    4.   
  
  
  
  4.   --primary-b: 48%; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. .button { 
    8.   
  
  
  
  8.   background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b)); 
    9.   
  
  
  
  9.   transition: background-color 0.3s ease-out; 
    10.   
  
  
  
  10. } 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. /* 使背景更暗 */ 
    13.   
  
  
  
  13. .button:hover { 
    14.   
  
  
  
  14.   --primary-b: 33%; 
    15.   
  
  
  
  15. } 
    16.

这里何通过减小变量--primary-b使按钮变暗。

用例三：比例调整

如果您使用过Photoshop，Sketch，Figma或Adobe XD之类的设计程序，那么我们会想在调整元素大小的同时按住Shift键以避免扭曲它。

在CSS中，没有直接的方法来做到这一点，但是我们有一个简单的解决方法，使用CSS变量。

假设有一个图标，并且其宽度和高度应该相等。我定义了变量--size，用于宽度和高度。

 
 
 
 
    
  
  
  
  
  1. .icon { 
    2.   
  
  
  
  2.   --size: 22px; 
    3.   
  
  
  
  3.   width: var(--size); 
    4.   
  
  
  
  4.   height: var(--size); 
    5.   
  
  
  
  5. } 
    6.

现在，您只需更改--size变量的值即可模拟Shift调整大小的效果。

用例四：CSS Grid

CSS 变量对于网格非常有用。假设希望网格容器根据定义的首选宽度显示其子项。与为每个变体创建类并复制CSS相比，使用变量更容易做到这一点。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2.   
  
  
  
  2.   --item-width: 300px; 
    3.   
  
  
  
  3.   display: grid; 
    4.   
  
  
  
  4.   grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); 
    5.   
  
  
  
  5.   grid-gap: 1rem; 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. .wrapper-2 { 
    9.   
  
  
  
  9.   --item-width: 500px; 
    10.

这样，我们可以创建一个完整的网格系统，该系统灵活，易于维护，并且可以在其他项目中使用。可以将相同的概念应用于grid-gap属性。

 
 
 
 
    
  
  
  
  
  1. wrapper { 
    2.   
  
  
  
  2.   --item-width: 300px; 
    3.   
  
  
  
  3.   --gap: 0; 
    4.   
  
  
  
  4.   display: grid; 
    5.   
  
  
  
  5.   grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. .wrapper.gap-1 { 
    9.   
  
  
  
  9.   --gap: 16px; 
    10.   
  
  
  
  10. } 
    11.

用例五：全值声明，CSS 渐变

以全值表示，例如，类似渐变的东西。如果整个系统中使用渐变或背景，将其存储到CSS变量中可能是一件好事。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8); 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .element { 
    6.   
  
  
  
  6.   background-image: var(--primary-gradient); 
    7.   
  
  
  
  7. } 
    8.

或者我们可以存储一个值。以角度为例:

 
 
 
 
    
  
  
  
  
  1. .element { 
    2.   
  
  
  
  2.   --angle: 150deg; 
    3.   
  
  
  
  3.   background-image: linear-gradient(var(--angle), #235ad1, #23d1a8); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. .element.inverted { 
    7.   
  
  
  
  7.   --angle: -150deg; 
    8.   
  
  
  
  8. } 
    9.

用例六：Background Position

我们可以在 CSS 变量中包含多个值，这在需要根据特定上下文将元素放置在不同位置的情况下很有用。

 
 
 
 
    
  
  
  
  
  1. .table { 
    2.   
  
  
  
  2.   --size: 50px; 
    3.   
  
  
  
  3.   --pos: left center; 
    4.   
  
  
  
  4.   background: #ccc linear-gradient(#000, #000) no-repeat; 
    5.   
  
  
  
  5.   background-size: var(--size) var(--size); 
    6.   
  
  
  
  6.   background-position: var(--pos); 
    7.   
  
  
  
  7. } 
    8.

用例七：在明暗模式之间切换

现在，网站比以往任何时候都更需要深色和浅色模式。使用CSS变量，我们可以存储它们的两个版本，并根据用户或系统偏好在它们之间切换。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --text-color: #434343; 
    3.   
  
  
  
  3.   --border-color: #d2d2d2; 
    4.   
  
  
  
  4.   --main-bg-color: #fff; 
    5.   
  
  
  
  5.   --action-bg-color: #f9f7f7; 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. /* 添加到``元素的类*/ 
    9.   
  
  
  
  9. .dark-mode { 
    10.   
  
  
  
  10.   --text-color: #e9e9e9; 
    11.   
  
  
  
  11.   --border-color: #434343; 
    12.   
  
  
  
  12.   --main-bg-color: #434343; 
    13.   
  
  
  
  13.   --action-bg-color: #363636; 
    14.   
  
  
  
  14. } 
    15.

用例八：设置默认值

在某些情况下，您将需要使用JavaScript设置CSS变量。假设我们需要获取可扩展组件的高度。

变量--details-height-open为空，它将被添加到特定的HTML元素中。当JavaScript由于某种原因失败时，提供适当的默认值或后备值很重要。

 
 
 
 
    
  
  
  
  
  1. .section.is-active { 
    2.   
  
  
  
  2.   max-height: var(--details-height-open, auto); 
    3.   
  
  
  
  3. } 
    4.

auto值是 JS 失败时的回退值，并且没有定义CSS变量——details-height-open。

用例九：控制 wrapper 宽度

网站wrapper 可以有多种变化。有时候是需要一个小包装一个页面，一个大包装另一个页面。在这种情况下，合并CSS变量可能是有用的。

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2.   
  
  
  
  2.   --size: 1140px; 
    3.   
  
  
  
  3.   max-width: var(--size); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. .wrapper--small { 
    7.   
  
  
  
  7.   --size: 800px; 
    8.   
  
  
  
  8. } 
    9.

用例十一：动态网格项目我们可以在style属性中添加--item-width变量，仅此而已。例如，这种方法可以帮助建立网格原型。

HTML

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
     
    3.   
  
  
  
  3.   
     
    4.   
  
  
  
  4.   
     
    5.
 

     

CSS

 
 
 
 
    
  
  
  
  
  1. .wrapper { 
    2.   
  
  
  
  2.   display: grid; 
    3.   
  
  
  
  3.   grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); 
    4.   
  
  
  
  4.   grid-gap: 1rem; 
    5.   
  
  
  
  5. } 
    6.

事例：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

用例十二：用户头像

另一个有用的用例是大小调整元素。假设我们需要四种不同大小的用户头像，并且只能使用一个变量来控制其大小。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. .c-avatar { 
    2.   
  
  
  
  2.   display: inline-block; 
    3.   
  
  
  
  3.   width: calc(var(--size, 1) * 30px); 
    4.   
  
  
  
  4.   height: calc(var(--size, 1) * 30px); 
    5.   
  
  
  
  5. } 
    6.

用例十三：媒体查询

组合CSS变量和媒体查询对于调整整个网站中使用的变量非常有用。我能想到的最简单的示例是更改间距值。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2.   
  
  
  
  2.   --gutter: 8px; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. @media (min-width: 800px) { 
    6.   
  
  
  
  6.   :root { 
    7.   
  
  
  
  7.     --gutter: 16px; 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

使用--gutter变量的任何元素都将根据视口大小更改其间距，这是不是很棒吗?

用例十四：继承

是的，CSS变量确实继承。如果父元素中定义了CSS变量，那么子元素将继承相同的CSS变量。我们看下面的例子：

HTML

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
     
    3.
 

css

 
 
 
 
    
  
  
  
  
  1. .parent { 
    2.   
  
  
  
  2.   --size: 20px; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .child { 
    6.   
  
  
  
  6.   font-size: var(--size); 
    7.   
  
  
  
  7. } 
    8.

.child元素可以访问变量--size，因为它从父元素继承了它。很有趣,那它在实际的项目中有啥用呢?

我们有一组以下需求的操作项

HTML

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
 
  •    
  •    
  •  

    •      

    CSS

     
 
 
 
      
  
  
  
  
    1. .actions { 
      2.   
  
  
  
    2.   --size: 50px; 
      3.   
  
  
  
    3.   display: flex; 
      4.   
  
  
  
    4.   gap: calc(var(--size) / 5); 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. .actions--m { 
      8.   
  
  
  
    8.   --size: 70px; 
      9.   
  
  
  
    9. } 
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11. .actions__item { 
      12.   
  
  
  
    12.   width: var(--size); 
      13.   
  
  
  
    13.   height: var(--size); 
      14.   
  
  
  
    14. } 
      15.

    请注意，这里是如何将变量--size用于flexbox gap属性的。这意味着间距可以是动态的，并且取决于--size变量。

    另一个有用的例子是使用CSS变量继承来定制CSS动画：

     
 
 
 
      
  
  
  
  
    1. @keyframes breath { 
      2.   
  
  
  
    2.   from { 
      3.   
  
  
  
    3.     transform: scale(var(--scaleStart)); 
      4.   
  
  
  
    4.   } 
      5.   
  
  
  
    5.   to { 
      6.   
  
  
  
    6.     transform: scale(var(--scaleEnd)); 
      7.   
  
  
  
    7.   } 
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. .walk { 
      11.   
  
  
  
    11.   --scaleStart: 0.3; 
      12.   
  
  
  
    12.   --scaleEnd: 1.7; 
      13.   
  
  
  
    13.   animation: breath 2s alternate; 
      14.   
  
  
  
    14. } 
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16. .run { 
      17.   
  
  
  
    17.   --scaleStart: 0.8; 
      18.   
  
  
  
    18.   --scaleEnd: 1.2; 
      19.   
  
  
  
    19.   animation: breath 0.5s alternate; 
      20.   
  
  
  
    20. } 
      21.

    这样，我们就不需要定义@keyframes两次，它将继承.walk和.run元素的定制CSS 变量。

    CSS 变量的工作方式

    当var()函数中的CSS变量无效时，浏览器将根据所使用的属性用初始值或继承值替换。

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-color: 16px; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section-title { 
      6.   
  
  
  
    6.   color: var(--main-color); 
      7.   
  
  
  
    7. } 
      8.

    我使用16px是color属性的值。这是完全错误的。由于color属性是继承的，因此浏览器将执行以下操作：

    下面解释浏览器工作的流程图。

    网址值

    我们可能无法控制网页中的所有资源，其中一些必须在线托管。在这种情况下，您可以将链接的URL值存储在CSS变量中。

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-bg: url("https://example.com/cool-image.jpg"); 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section { 
      6.   
  
  
  
    6.   background: var(--main-bg); 
      7.   
  
  
  
    7. } 
      8.

    但是，能想知道是否可以使用url()插入 CSS 变量。考虑以下

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-bg: "https://example.com/cool-image.jpg"; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section { 
      6.   
  
  
  
    6.   background: url(var(--main-bg)); 
      7.   
  
  
  
    7. } 
      8.

    由于var(--main-bg)被视为url本身，因此无效。当浏览器计算出该值时，该值将不再有效，并且将无法按预期运行。

    存储多个值

    CSS 变量也可以表示多个值，看下面的例子：

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --main-color: 35, 90, 209; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section-title { 
      6.   
  
  
  
    6.   color: rgba(var(--main-color), 0.75); 
      7.   
  
  
  
    7. } 
      8.

    在示例中，我们有一个rgba()函数，并且RGB值存储在CSS变量中，以逗号分隔。如果我们想根据元素调整alpha值，这样做可以提供灵活性。唯一的缺点是无法使用DevTools颜色选择器来调整rgba值。

    另一个例子是将它与background属性一起使用。

     
 
 
 
      
  
  
  
  
    1. :root { 
      2.   
  
  
  
    2.   --bg: linear-gradient(#000, #000) center/50px; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .section { 
      6.   
  
  
  
    6.   background: var(--bg); 
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. .section--unique { 
      10.   
  
  
  
    10.   background: var(--bg) no-repeat; 
      11.   
  
  
  
    11. } 
      12.

    @keyframes规则中的动画变量

    如果你阅读过CSS变量规范，则可能会读到“动画污染”一词。这个想法是，在@keyframes规则中使用CSS变量时，无法对其进行动画处理。

    html

     
 
 
 
      
  
  
  
  
    1.  
      2.

    CSS

     
 
 
 
      
  
  
  
  
    1. .box { 
      2.   
  
  
  
    2.   width: 50px; 
      3.   
  
  
  
    3.   height: 50px; 
      4.   
  
  
  
    4.   background: #222; 
      5.   
  
  
  
    5.   --offset: 0; 
      6.   
  
  
  
    6.   transform: translateX(var(--offset)); 
      7.   
  
  
  
    7.   animation: moveBox 1s infinite alternate; 
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. @keyframes moveBox { 
      11.   
  
  
  
    11.   0% { 
      12.   
  
  
  
    12.     --offset: 0; 
      13.   
  
  
  
    13.   } 
      14.   
  
  
  
    14.   50% { 
      15.   
  
  
  
    15.     --offset: 50px; 
      16.   
  
  
  
    16.   } 
      17.   
  
  
  
    17.   100% { 
      18.   
  
  
  
    18.     --offset: 100px; 
      19.   
  
  
  
    19.   } 
      20.   
  
  
  
    20. } 
      21.

    动画无法顺利进行。它将仅对值 (0, 50px, 100px)进行动画处理。根据CSS规范：

    @keyframes规则中使用的任何自定义属性都会受到动画污染，这将影响通过动画属性中的var()函数引用它时如何处理它。

    如果我们希望上述动画能够正常工作，则应采用老式的方法。这意味着，我们需要用要设置动画的实际CSS属性替换变量。

     
 
 
 
      
  
  
  
  
    1. @keyframes moveBox { 
      2.   
  
  
  
    2.   0% { 
      3.   
  
  
  
    3.     transform: translateX(0); 
      4.   
  
  
  
    4.   } 
      5.   
  
  
  
    5.   50% { 
      6.   
  
  
  
    6.     transform: translateX(50px); 
      7.   
  
  
  
    7.   } 
      8.   
  
  
  
    8.   100% { 
      9.   
  
  
  
    9.     transform: translateX(100px); 
      10.   
  
  
  
    10.   } 
      11.   
  
  
  
    11. } 
      12.

    计算

    你可能不知道可以使用 CSS 变量进行计算。考虑下面示例：

     
 
 
 
      
  
  
  
  
    1. .c-avatar { 
      2.   
  
  
  
    2.   display: inline-block; 
      3.   
  
  
  
    3.   width: calc(var(--size, 1) * 30px); 
      4.   
  
  
  
    4.   height: calc(var(--size, 1) * 30px); 
      5.   
  
  
  
    5. } 
      6.

    .c-avatar 大小会有不同的变化。我将默认值设置为1，所以默认大小为(30px * 30px)。注意不同的类变化以及更改--size值如何导致化身的大小变化。

     
 
 
 
      
  
  
  
  
    1. .c-avatar--small { 
      2.   
  
  
  
    2.   --size: 2; 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. .c-avatar--medium { 
      6.   
  
  
  
    6.   --size: 3; 
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. .c-avatar--large { 
      10.   
  
  
  
    10.   --size: 4; 
      11.   
  
  
  
    11. } 
      12.

    Devtools和CSS变量

    我们可以在浏览器DevTools中使用一些有用的技巧，这样就能更轻松地使用CSS变量。

    看到颜色

    使用CSS变量时，看到颜色或背景值的视觉指示器是否有用?Chrome和Edge证明了这一点。

    计算值

    要查看CSS变量的计算值，只要将鼠标悬停或单击即可。

    禁用CSS变量

    当我们需要从使用CSS变量的所有元素中禁用CSS变量时，可以通过从定义它的元素中取消选中它来实现。参见下图：

    本文介绍了 CSS 变量的很多内容，希望能对你有些帮助，二创不易，还望点个赞+转发。

    作者：Ahmad Shadeed 译者：前端小智 来源：ishadeed原文：https://ishadeed.com/article/css-vars-101/

    本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

    分享名称：如果你觉得自己对CSS变量不熟悉，那么可以补充这个！
    浏览地址：http://www.shufengxianlan.com/qtweb/news31/538181.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    商城网站知识

    同城分类信息

    创新互联重庆　　 　四川國際商會　　 　达州网站建设　　 　中建建业环保　　 　成都联通服务器托管　　 　网站空间　　 　西部信息中心　　 　光华机房服务器托管　　 　四川成都seo网站优化　　 　都江堰网站建设　　 　成都装饰装修　　 　成都店面装修公司　　 　绵阳服务器托管　　 　成都西信服务器托管　　 　h5页面制作　　 　德阳网站建设　　 　江安网站建设　　 　LED亮化工程　　 　全网营销推广　　 　小谭建站