css变量使用

发布于:2024-05-22 ⋅ 阅读:(68) ⋅ 点赞:(0)

命名规范

  • 双横线加字母开头,由字母、数字、破折号和短横线组成
  • 使用有意义的名称
  • 使用小写字母和连接符(–primary-color)
  • 为了避免与其他变量冲突,使用命名空间(–space-primary-color)

定义

在根元素(:root)中定义,以便全局使用

:root {
  --primary-color: #ff0000;
  --font-size: 16px;
}

使用

使用 var() 函数将变量包裹起来。变量可以在任何可以使用 CSS 属性值的地方使用

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
}
  • 变量值是一个字符串,可以与其他字符串拼接
<!DOCTYPE html>
<html>

<style>
  :root {
    --primary-content: 'hello';
  }
  .box:after {
    content: '标题 : ' var(--primary-content)
  }
</style>
<body>
  <div class="box"></div>
</body>
</html>
  • 变量值是数值,使用 calc() 函数,将变量的值乘以 1 像素
<!DOCTYPE html>
<html>

<style>
  :root {
    --primary-num: 40;
  }
  .box {
    padding-top: calc(var(--primary-num) * 1px);
  }
</style>
  • 变量值带有单位,不能写成字符串
<!DOCTYPE html>
<html>

<style>
  :root {
    --border-radius-box1: '20px';  //错
    --border-radius-box2: 20px;   // 正确
  }

修改(变量的值可以在 CSS 中动态修改)

  • 使用伪类(:hover、:focus等)来修改变量的值
.element:hover {
  --primary-color: #00ff00;
}
  • 通过JavaScript来修改变量的值(用户切换主题)
document.documentElement.style.setProperty('--primary-color', '#00ff00');

最佳实践

在vue的入口文件import进来写了根元素写了css变量的文件,各个组件可用

index.css:
:root{--font-size: 16px;}
--------------------------------------
index.js:
import './index.css';