css如何使用变量?

CSS 变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的 var() 来访问。

CSS 变量当前有两种形式:

  • 变量,就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如:var(--example-variable)会返回--example-variable所对应的值

  • 自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量。

css中使用变量的方法:

声明变量时,变量名前要加两根连词线(--)。

示例:

声明一个局部变量:

element {
  --main-bg-color: brown;
 }

使用一个局部变量:

element {  
background-color: var(--main-bg-color);
}

声明一个 全局 CSS 变量:

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

使用一个 全局 CSS 变量:

.demo{
   color: var(--global-color);
}

以上就是css如何使用变量?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读