CSS-了不起的CSS变量

guangzan 2019-03-14 原文

为什么使用 css variables

easier to get started (no transpiling)
have access to the DOM
1.local scopes
2.change width Js
3.ideal for responsiceness
perfect for themes

什么是CSS变量

CSS 变量当前有两种形式：

自定义属性。
这些属性使用–where的特殊格式作为名字。例如–example-variable: 20px;即是一个css声明语句。意思是将20px赋值给–example-varibale变量。
变量。
就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(–example-variable)会返回–example-variable所对应的值

总结：
带有前缀–的属性名，比如–example–name，表示的是带有值的自定义属性，其可以通过var()函数使用。

补充

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。
CSS 变量并不支持 !important 声明。
- 初始值 *see prose
- 适用元素 *all elements
- 是否是继承属性 *yes
- 适用媒体 *all
- 计算值 *as specified with variables substituted
- Animation type *discrete
- 正规顺序 *per grammar

CSS变量的继承

html

<div class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

css

.two { --test: 10px; }
.three { --test: 2em; }

在这个例子中，var(–test)的结果是：

class=”two” 对应的节点: 10px
class=”three” 对应的节点: element: 2em
class=”four” 对应的节点: 10px (inherited from its parent)
class=”one” 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值

:root

:root 这个 CSS 伪类匹配文档树的根元素。
对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。所以我们把自定义属性写在:root{}里面，html标签里面的元素会继承的。

html

 <body>
    <section id="container">
      <div class="item1"></div>
      <div class="item2"></div>
      <div class="item3"></div>
      <div class="item4"></div>
    </section>
  </body>

css

#container {
width: 400px;
height: 150px;
background-color: #ffeead;
border: 1px solid #666;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#container > div {
width: 70px;
height: 50px;
}
.item1 {
background-color: mediumspringgreen;
}
.item2 {
background-color: mediumspringgreen;
}
.item3 {
background-color: palevioletred;
}
.item4 {
background-color: palevioletred;
}

==================

声明变量

css

      :root {
        --green: lightgreen;
        --lightpink: lightpink;
      }
      .item1 {
        background-color: var(--green);
      }
      .item2 {
        background-color: var(--green);
      }
      .item3 {
        background-color: var(--lightpink);
      }
      .item4 {
        background-color: var(--lightpink);
      }

background-color的值用var()代替实现相同的效果

CSS 层级变量

局部变量会在作用范围内覆盖全局变量。

css

:root {
    --green: lightgreen;
    --lightpink: lightpink;
}
.item1 {
    --green: black;
    background-color: var(--green);
}

使用多个变量

css

:root{ 
     --word:"this"; 
      --word-second:"is";  
      --word-third:"CSS Variable";
}
div::before{  
    content:var(--word)' 'var(--word-second)' 'var(--word-third);
}