代码之家 › 专栏 › 技术社区 › ryanve

CSS作用域自定义属性在用于计算外部作用域中的变量时被忽略

css-variables scope css3 css

3

ryanve · 技术社区 · 6 年前

我正试图通过一个 var 自定义属性,使类可以在不耦合的情况下组合。理想的效果是,这3个列表将在3个不同的尺度上,但作为 demonstrated on CodePen 所有3个列表都是相同的规模。我正在寻找一个关于作用域和CSS自定义属性技术的解释,它可以通过可组合的松散耦合代码实现这一点。

: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;
}

<ol class="scale-1x">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>
<ol class="scale-2x">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>
<ol class="scale-3x">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>

1 回复 | 直到 5 年前