CSS如何使用变量？代码示例

2021年3月30日11:32:51 发表评论 749 次浏览

CSS变量就像任何编程语言的简单变量一样。这些变量用于存储值, 并具有可以使用这些变量的范围。通过在开头使用两个破折号(–), 然后使用区分大小写的名称来定义变量。变量的好处是它允许在多个位置重用相同的值, 并可以从一个位置更新/修改它们。而且, 与颜色的值相比, 变量名称更易于理解和使用。

语法如下：

var( --custom-name, value )

参数：变量var()接受下面列出的两个参数：

–自定义名称它是必需的参数, 它接受定制属性名称。
值：它是一个可选参数。它接受当自定义属性无效时使用的后备值。

范例1：

<!DOCTYPE html>
< html >
     < head >
         < title >CSS Variables</ title >
          
          < style >
             :root {
                 --bg-color: green;
                 --txt-color: white;
             }
              
             /* var() function used here */
             body {
                 background-color: var(--bg-color);
             }
             h1 {
                 color: var(--txt-color);
             }
             div {
                 color: var(--txt-color);
             }
         </ style >
     </ head >
      
     < body >
         < h1 >lsbin</ h1 >
          
         < div >
             A computer science portal for geeks
         </ div >
     </ body >
</ html >

输出如下：

范例2：

<!DOCTYPE html>
< html >
     < head >
         < title >CSS Variables</ title >
          
          < style >
             :root {
                 --bg-color: green;
             }
              
             /* var() function used here */
             body {
                 background-color: var(--bg-color);
             }
             h1 {
                 color: var(--txt-color, white);
             }
             div {
                 color: var(--txt-color, white);
             }
         </ style >
     </ head >
      
     < body >
         < h1 >lsbin</ h1 >
          
         < div >
             A computer science portal for geeks
         </ div >
     </ body >
</ html >

输出如下：