命名规范
- 双横线加字母开头,由字母、数字、破折号和短横线组成
- 使用有意义的名称
- 使用小写字母和连接符(–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';