html - CSS 累计百分比

Question

我正在尝试构建一个不需要很多类就可以正常运行的网格系统。

我教过的一种方法是使用基于硬币的系统。例如，在欧洲，我们可以通过组合来制造等值于任何 1 欧元的硬币:

1. 2 x .50c,
2. 1x.50c + 2x.20c + 1x.10c,
3. 1x.50c + 1x.20c + 2x.10c, + 2x.05c

你明白了。

考虑到这一点，我想创建一组 CSS 类，例如:

1. c1 为 1%
2. c2 为 2%
3. 5% 的 c5
4. 10% 的 c10
5. c20 为 20%
6. 50% c50
7. 100% c100

现在假设有人想要拥有 33%，他们(理论上)可以通过组合获得:1xc20 + 1xc10 + 1xc2 + 1xc1 = 33%

潜在的 html 可能看起来像(理论上)

<div class="c20 c10 c2 c1">
    some text
</div>

现在让这些人使用我的理论网格系统，可能会创建具有最少类别的任何形状或大小的网格，我认为最多需要 5 个。

我的问题:在 HTML/CSS 中有没有一种方法可以像这样组合类，从而允许我“累积”总宽度(如上例中的 33%)？或者我是否必须为每个 % 创建一个可能有 100 个不同的类？

我愿意使用任何 CSS 预处理器(例如 SCSS/LESS)，但我更想知道是否可以直接使用 HTML/CSS。

但是，出于同样的原因(我对此考虑得更多)，我不想使用 JavaScript/jQuery，我不想使用 CSS 后处理器。

最后一点，这里的 % 只是为了简单起见，它可以很容易地是任何其他度量(px、em、rem 等)。例如，如果我们有一个 1000px 的宽度，我们可以将它分成 100 个部分，每个部分 10px，然后根据需要使用它们。如果我们想将 10px 分解得更小，则以某种方式在网格中使用网格。

在此先感谢您的帮助。

Answer 1

是的，您必须创建每一个。例如，

.c20.c10.c2.c1 {宽度:33%}

但我不认为这个系统有什么优点 - 如果用户希望它在移动设备上达到 33% 而在平板电脑或台式机上达到 100% 怎​​么办？当然 Bootstrap “col-xs-4 col-lg-12”要简单得多。