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

📅  最后修改于: 2021-11-07 08:53:09             🧑  作者: Mango

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

示例 1:



  

    
        How to define colors as variables in CSS?
    
    

  

    
        

GeeksforGeeks

    
       
        

GeeksforGeeks

    
  

输出:
example_first

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

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

示例 2:



  

    
        How to define colors as variables in CSS?
    
  
    

  

    
        

GeeksforGeeks

    
       
        

GeeksforGeeks

    
  

输出:
example_last