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其它相关文章!

推荐阅读