旧木逢春的css原生变量还能起死回生嘛？

提起css原生变量，很多人估计就要挠头了，特别是近几年培训出身的“速成工作者”！一定也是满头的问号，是不是已经有画面感了！

七娃也是在“思否”这个平台看到，所以回顾一下这个被人遗忘在角落里的好工具！原生css最初被抛弃的原因就是“浏览器的不兼容，ie，欧朋等浏览器的不支持”，但是随着互联网的发展，逐渐的浏览器都已经支持了这个“老技术”，而这个技术相对于这几年的less和sass来说，一看就懂，容易入手，10分钟能学会!这就是css原生变量的强大优势，而且配合bootstrap的话，开发响应式网站，那可是溜得飞起！

一、基本用法

先声明这个变量的属性，然后再引入，声明初始css样式用 ：root ，声明的属性必须带 --，命名可以随意，不过需要让别人看懂！引入格式 var(--变量名)

:root{
        --width: 100%;
        --height: auto;
        --border: 1px solid #ddd;
        --font: 16px/1.5 "微软雅黑" #333;
        --background: red;
        --br: 6px;
}
.box{
        width: var(--width);
        height:100px;
        background: var(--background);
        border-radius: var(--br);
}

上面我们声明了盒子的宽高背景色字体大小，以及圆角，特别是圆角，七娃专门自定义这样写，咱们看看能不能生效，效果如下：

很明显生效了！

二、变量作用域

我们知道js的变量有作用域，在这里原生的css变量也是有作用域的，我们默认的：root，里面声明的css样式，可以说成全局的作用域，每个地方都可以使用；

但是要是想局部生效怎么用？我不想用全局的样式的了，颜色不合适！我们看一下怎么想修改：

:root{
        --width: 100%;
        --height: auto;
        --border: 1px solid #ddd;
        --font: 16px/1.5 "微软雅黑" #333;
        --background: red;
        --br: 6px;
      }
      .box{
        width: var(--width);
        height:100px;
        --background: #333;
        background: var(--background);
        border-radius: var(--br);
      }

对，我们在box这个元素的样式里面，重新声明了这个背景色，并设置为#333,是全局的生效还是box元素里面的声明有效果呢！看结果：

生效了，所以需要局部作用域的使用就是在该元素的自身重新声明属性即可！

三、主要用途

主要用途，我们上面提到过就是和bootstrap结合使用，可以实现快速开发，果断你会放弃less和sass，那样太费劲了！

如下写法，对于不同分辨率，我们只需要修改相对分辨率里面的属性即可修改对应的值，是不是很方便！

               :root {
        --mainWidth:1000px;
        --leftMargin:100px;
      }
       
      .main {
        width: var(--mainWidth);
        margin-left: var(--leftMargin);
      }
       
      @media screen and (min-width:1480px) {
          :root {
            --mainWidth:800px;
            --leftMargin:50px;
          }
      }

除此之外，css原生变量还可以用来计算和组合使用，也可以用到js中，更多的用途有待你去探索