📌  相关文章
📜  CSS 变量(variables)

📅  最后修改于: 2020-11-05 05:20:55             🧑  作者: Mango

CSS变量

CSS变量用于将自定义属性的值添加到我们的网页。自定义属性有时称为级联变量或CSS变量。作者定义了包含特定值的实体，并且可以在整个文档中重复使用。这些实体是使用自定义属性符号设置的，可以使用var()函数进行访问。

变量存储值，并具有可以使用它们的范围。

CSS变量之所以具有优势，是因为它们允许我们在多个地方重用相同的值。与颜色值相比，变量的名称易于理解和使用。

element {
  --main-color: brown;
}

CSS中的变量是通过在开头使用两个破折号(-)定义的，后跟名称，区分大小写。

在上述语法中，元素指示用于指定定制属性范围的选择器。如果我们在：root伪类上定义自定义属性，那么它将被全局地应用于我们的HTML文档。自定义属性的名称区分大小写，即–main-color和–Main-color将被视为单独的自定义属性。

var()函数

CSS中的var()函数用于插入自定义属性值。变量的名称可以作为参数传递给var()函数。

句法

var( --custom-name, value )

参量

var()函数仅允许定义以下两个参数：

–custom-name：此参数接受定制属性的名称。它必须以两个破折号(-)开头。它是必需的参数。

value：这是一个可选参数，接受后备值。当自定义属性无效时，它将用作替换。

后备值不用于固定浏览器的兼容性。当任何浏览器不支持自定义属性时，后备值将无用。如果变量具有无效值或未定义变量，则后备值将替代支持CSS定制属性的浏览器，以选择其他值。

定义后备值的有效方法和无效方法如下：

element {
  color: var(--main-color, orange); /* orange if --main-color is not defined */
}

element {
  background-color: var(--main-color, var(--main-background, blue)); /* blue if --main-color and --main-background are not defined */
}

element {
  background-color: var(--main-color, --main-background, gray); /* Invalid*/
}

现在，让我们使用一些插图来了解CSS变量。

例

 
 
     
        CSS Variables 
          
          
     
     
        
Welcome to the javaTpoint.com
 
          
        
 
            This is an example of CSS variables
            
--bg-color: lightgreen;

            
--text-color: red;

输出量

在上面的示例中，我们没有使用后备值。现在，在下一个示例中，我们将使用后备值。

例

 
 
     
        CSS Variables 
          
          
     
      
     
        
Welcome to the javaTpoint.com
 
          
        
 
            This is an example of CSS variables
    
--bg-color: lightgreen;

在此示例中，没有设置CSS变量–text-color，因此，后备值将用作变量的替换。

输出量

结合使用calc()和var()

我们可以在变量值上使用calc()。让我们看一个示例，其中我们将calc()函数与var()函数。

在此示例中，我们使用calc()函数和var()函数来调整元素的填充和字体大小。

例




CSS Variables






Welcome to the javaTpoint.com




This is an example of using the calc() function with the var() function

输出量