虽然less和scss都有变量，但css自身的变量也很强大，如果是纯静态页面，使用变量可以减少耦合，提升代码质量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
--bg-color:#fff;
--font-color:#000;
}
.panel{
font-size: 16px;
padding:20px;
border:1px solid #ccc;
background-color: var(--bg-color);
color:var(--font-color);
}
.black{
--bg-color:#000;
--font-color:#fff;
}
</style>
</head>
<body>
<div class="common">
<div class="panel">
<h2>普通面板</h2>
<div class="cont">
测试测试测试
</div>
</div>
</div>
<div class="black">
<div class="panel">
<h2>普通面板</h2>
<div class="cont">
测试测试测试
</div>
</div>
</div>
</body>
</html>
bg.png
通过以上案例可以看出，用了变量符，我们只需在black类里面重新定义变量，即可达到变色效果。
网友评论