CSS继承的困扰

cqwcns 发表于 2022-5-17 09:14

如果你是一个前端开发人员，对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，而不要继承父级的透明度。

这种问题有没有办法解决？谢谢

<!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>

leohsun 发表于 2022-5-17 09:26

其他还好,透明度,transform 这些,肯定是随父级,父级都隐藏了,子元素肯定不在了,儿子随爹

cqwcns 发表于 2022-5-17 10:51

leohsun 发表于 2022-5-17 09:26
其他还好,透明度,transform 这些,肯定是随父级,父级都隐藏了,子元素肯定不在了,儿子随爹

其实rgba是非有办法分开写，如果能分开两个属性来写rgb和就能解决问题。

Todd 发表于 2022-5-17 20:35

不用rgba 使用rgb +opacity 行么 --alpha 这个始终会继承的

cqwcns 发表于 2022-5-22 15:02

Todd 发表于 2022-5-17 20:35
不用rgba 使用rgb +opacity 行么 --alpha 这个始终会继承的

opacity和alpha是两码事，不能这样用。
谢谢回复。

页: [1]

吾爱破解 - 52pojie.cn's Archiver

CSS继承的困扰