Question

我正在尝试构建一个不需要很多类才能运行的网格系统。

我教过的一种方法是使用基于硬币的系统。例如，在欧洲，我们可以通过组合使用相当于任何1欧元的硬币：

你明白了。

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

现在让我们说有人想要33％，他们会（在理论上）通过组合得到它： 1xc20 + 1xc10 + 1xc2 + 1xc1 = 33％

潜在的html可能看起来像（在理论上）

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

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

我的问题：在HTML / CSS中是否有办法将这样的类组合起来，以便我能够积累＆＃34;积累＆＃34;总宽度（如上例33％）？或者我是否必须为每个％创建100个不同的类？

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

但是，出于同样的原因，我宁愿不使用JavaScript / jQuery（我想更多关于它）我不想使用CSS后处理器。

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

提前感谢您的帮助。

Answer 1

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

.c20.c10.c2.c1 {width：33％}

但是我不认为这个系统有很多优点 - 如果用户希望移动设备为33％，平板电脑或台式设备为100％，该怎么办？当然，引导“col-xs-4 col-lg-12”要简单得多。

Answer 2

没有。不是你的想法。 CSS不是一种编程语言，你要求它具有累积变量并将其推入其他变量的函数。 CSS没有任何这些东西。这不是它的功能。