我正在尝试通过 var 自定义属性来缩放大小，以便类可以在不耦合的情况下组合。期望的效果是 3 个列表将具有 3 个不同的比例，但正如 CodePen 上所示，所有 3 个列表的比例相同。我正在寻找范围界定和 CSS 自定义属性技术的解释，该技术可以通过可组合的松散耦合代码来实现此目的。
1
917:root {
--size-1: calc(1 * var(--scale, 1) * 1rem);
--size-2: calc(2 * var(--scale, 1) * 1rem);
--size-3: calc(3 * var(--scale, 1) * 1rem);
}
.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }
.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }
html {
font: 1em sans-serif;
background: papayawhip;
}
ol {
float: left;
list-style: none;
margin: 1rem;
}
- size 1
- size 2
- size 3
- size 1
- size 2
- size 3
- size 1
- size 2
- size 3
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
