如果你是一个前端开发人员，对Tailwind、Windi CSS等原子类CSS应该不陌生，事实上这种写法非常好用，能够快速、规范地构建前端代码。
遗憾的是微信小程序对这种库的支持并不完美，有很多类都用不了，而且依赖安装也不方便。
基于上述情况，根据微信小程序WXSS的特性，自己写了一个原子类CSS。
大部分CSS属性都能拆分来写，例如padding-top、padding-left等，唯一这个rgba是一个整体。
以下Demo我希望实现元素的背景色和透明度等单独灵活配置，思路也是先声明变量，再写原子类。
默认透明度alpha为1，但可以通过bg-a-50这样的类来自定义透明度。
问题：div-b默认继承了div-a的透明度配置，实际上我希望每个元素，如果不设置bg-a-50，那么透明度都是默认的1，而不要继承父级的透明度。
这种问题有没有办法解决？谢谢
[HTML] 纯文本查看 复制代码 <!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>Docsument</title>
</head>
<body>
<style>
/* CSS变量 */
:root {
--alpha: 1;
--color-1: 118, 238, 0;
--color-2: 184, 134, 11;
}
/* 元素样式 */
div {
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
}
.div-a {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.div-b {
width: 100px;
height: 100px;
border: 1px solid blue;
position: absolute;
}
/* 原子类CSS */
.bg-1 {
background-color: rgba(var(--color-1), var(--alpha));
}
.bg-2 {
background-color: rgba(var(--color-2), var(--alpha));
}
.bg-a-50 {
--alpha: .5;
}
</style>
<div class="div-a bg-1 bg-a-50">
父级测试文本
<div class="div-b bg-2">子级测试文本</div>
</div>
</body>
</html>
| 
发表于 2022-5-17 09:14
|
发表于 2022-5-17 10:51
