css变量了解到项目落地

背景

最近在打开一些网站的，查看其CSS样式的时候，发现如下图：

所以就很好奇，原来现在CSS样式变量已经可以正式投入生产使用了，所以希望能够做个简单了解。

浏览器的兼容性：

CSS变量var()

是什么

自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： –main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）

通俗的说，就是CSS以后不需要用less或css也能正常使用变量去定义一些常用值。

怎么用

1. 声明以及对应作用域

   /* 可以HTML 文档的任何地方访问到它 */
   :root {
     --main-bg-color: brown;
   }
   :where(html){
     
   }
   /* 只能在element元素下面所对应使用 */
   element {
     --main-bg-color: brown;
   }

2. 引用变量

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

3. 自带继承

<style>
.one{
    /** 无法使用 var(--test) */
}
.two {
  --test: 10px;
}

.three {
    /** 重写 var(--test) = 2em */
  --test: 2em;
}    
.four {
    /** 继承.two的变量 var(--test) = 10px */
}
</style>

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

4. 自定义属性备用值

var(--my-var, xxx)，当一个变量未定义或非法值的时候，可以red用来做正常显示值，备用值并不是用于实现浏览器兼容性的。

.two {
  color: var(--my-var, red); /* 入股my-var 没有定义，则用red显示 */
}

5. JS获取变量值

/设置变量
document.querySelector('p').style.setProperty('--weight','bold');
//读取变量
document.querySelector('p').style.getPropertyValue('--weight');
//删除变量
document.querySelector('p').style.removeProperty('--weight');

CSS变量实战

在前端项目中如何使用CSS变量，一般是通过构建工具生成的兼容性代码。

浏览器是否支持

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a',0);
if(isSupported) {
    /* 这里面是支持css变量的操作 */
}else {
    /* 这里面是不支持css变量的操作 */
}

也可以通过CSS中@supports做判断：

@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}

应用场景

• 最常用的是网站换主题，在开发过程直接按照CSS变量去编写，而不需要去了解SASS或LESS的语法
• 原本一些动画效果，需要多个css样式区分，现在可以通过css变量实现，从而减少代码
• 结合JS操作事件+更改CSS变量，实现更多CSS效果

变量库

open-props CSS常用变量收集库

@import "https://unpkg.com/open-props";

.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

参考资料

CSS自定义变量 MDN

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： Qborfy
• 本文链接： https://www.qborfy.com/today/20230208.html
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！