CSS变量

Myth丶恋晨 2022-05-24 02:26 246阅读 0赞

# 变量的声明 #

声明变量的时候，变量名前面要加两根连词线 -- 。

:root {
        --color:#000;
        --Color:#001;
    
    }

:root伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到

body {
        color : var(--color);
        color : var(--Color);
    }

使用自定义属性来设置变量名，并使用特定的 var() 来访问,区分大小写

> var(--color); var(--Color);是不同的两个

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

> var(--bg, \#111)这种情况只存在于没有默认值

### 其实每个大括号都是一个作用域，内部优先级高于外部变量优先级 ###

:root {
        --color:#000;
    
    }
    body {
        --color:#002;
        color : var(--color);
    }
    //这里用个大佬们的例子，下面每个字的颜色都是按选择器的优先级现实的
    <style>
      :root { --color: blue; }
      div { --color: green; }
      #alert { --color: red; }
      * { color: var(--color); }
    </style>
    
    <p>蓝色</p>
    <div>绿色</div>
    <div id="alert">红色</div>

> 需要注意的是 CSS 变量并不支持 !important 声明。

var()函数还可以用在变量的声明。

:root {
      --color: red;
      --bg: var(--color);
    }

> 注意，变量值只能用作属性值，不能用作属性名。
> 
>     :root {
>       --color: color;
>       var(--color): red;
>     }
> 
> 这样是不合法的

# 变量值的类型 #

*  如果变量值是一个字符串，可以与其他字符串拼接。
    
        --one: '1px';
        --border: var(--one)' solid red';
 *  如果变量值是数值，不能与数值单位直接连用。
    
        .foo {
          --top: 20;
          /* 无效，相当于没有设置 */
          margin-top: var(--top)px;
        }
 *  如果变量值带有单位，就不能写成字符串。
    
        .foo {
          --top: "20px";
          /* 无效，相当于没有设置 */
          margin-top: var(--top);
        }
 *  数值与单位直接写在一起，可以使用[calc()][calc]函数，将它们连接，不过要小心兼容问题。
    
        .foo {
          --top: 20;
          margin-top: calc(var(--top) * 1px);
        }

在传统的CSS概念里，属性的有效性(validity)对于自定义属性来讲，并不适用。当自定义属性被解析，浏览器不知道哪里为调用到它们，所以几乎所有的值都是有效的。  
不幸的是，这些有效值能通过var()函数操作符来调用，即使在当前上文没有意义。所以属性和自定义的值会导致无效的CSS声明。

1.  不能使用CSS自定义属性作为CSS属性名称：var(--side): 10px;
2.  不能作为媒体查询值使用：@media screen and (min-width: var(--min-width) \{\}
3.  图片地址，如url(var(--image-url)) ，不会生效

# 响应式布局 #

*  一般而言，使用媒体查询的时候，我们需要将要响应式改变的属性全部重新罗列一遍。利用css变量的特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。在这里它的作用将优于 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;
        }
    }

# 兼容性处理 #

*  别处理了放弃低版本浏览器吧，过。
 *  检查是否兼容:说实话我是不想检测兼容的自己试呢反正都是最新的东西，等团队决定要用了兼容问题也不会太严重

a {
      color: #7F583F;
      color: var(--primary);
    }
    /* 用属性值得无效声明 */
    
    @supports ( (--a: 0)) {
      /* supported */
    }
    @supports ( not (--a: 0)) {
      /* not supported */
    }
    /* 也可以使用@support命令进行检测。 */
    
    const isSupported =
        window.CSS &&
        window.CSS.supports &&
        window.CSS.supports('--a', 0);
    
    if (isSupported) {
        /* supported */
    } else {
        /* not supported */
    }
    /* JavaScript 检测浏览器是否支持 CSS 变量。 */

# JavaScript 操作 #

*  这也是css变量一大实用之处

*  读写属性

:root{
      --testMargin:75px;
    }
    
    var root = getComputedStyle(document.documentElement);
    //  读取
    var cssVariable = root.getPropertyValue('--testMargin').trim();
    console.log(cssVariable); // '75px'
    // 写入
    root.setProperty('--testMargin', '100px');
    // 删除变量
    root.removeProperty('--testMargin');

这意味着，JavaScript 可以将任意值存入样式表。

1.  网页换肤点击按钮改变CSS变量值

const btn = document.getElementById("button");
    const docStyle = document.documentElement.style;
    btn.onClick = function(){
        docStyle.style.setProperty('--tplColor', 'yellow');
    }

1.  监听事件，事件信息存入 CSS 变量。

const docStyle = document.documentElement.style;
    
    document.addEventListener('mousemove', (e) => {
        docStyle.setProperty('--mouse-x', e.clientX);
        docStyle.setProperty('--mouse-y', e.clientY);
    });

作者：gostfather  
链接：https://juejin.im/post/59c9af536fb9a00a3e306d73  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[calc]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fcalc