如何在 CSS 中将颜色定义为变量？

在 CSS 中，我们可以定义自定义属性(通常称为 CSS 变量)，这为我们提供了极大的灵活性来定义一组规则并避免一次又一次地重写它们。我们还可以使用自定义属性来定义颜色。

示例 1：

  

    
    

  

    

        
GeeksforGeeks
    
  
    

        
GeeksforGeeks
    

  

输出：

说明：在上面的例子中，我们定义了两个具有 root 作用域的变量(它可以在整个页面中使用)， --primary-color和--secondary-color 。然后，我们使用 CSS var()函数在第一和第二类中使用它们。

注意： :root选择器可以替换为任何本地选择器。此外，它只会限制该选择器中定义变量的范围。

示例 2：

  

    
  
    

  

    

        
GeeksforGeeks
    
  
    

        
GeeksforGeeks
    

  

输出：