html - 在块/块中建立边距/填充

Question

理想情况下，我想在 SCSS 中这样写：

$small: 1px;
$large: 10px;

.top-margin-1small { margin-top: $small; }
.top-margin-2small { margin-top: 2*$small; }
// ...
.top-margin-9small { margin-top: 9*$small; }

.top-margin-1large { margin-top: $large; }
.top-margin-2large { margin-top: 2*$large; }
// ...
.top-margin-9large { margin-top: 9*$large; }

然后BUILD UP BRICK BY BRICK在我的 HTML 中喜欢的任何边距，如下所示：

<div class="top-margin-1large top-margin-3small">
  foo
</div>

唯一的问题是，这不起作用，因为边距不能“堆积”在彼此的“顶部”上。较大的一个“获胜”或指定的最后一个边距“获胜”（我忘了，是哪个？）

我想做的事情有什么好的解决方案吗？

Answer 1

您可能必须执行以下操作：

.top-margin-1large-3small {margin-top: $large+3*$small}

但是，您需要定义 81 条规则 (9 x 9)，命名规则为

.top-margin-{n}large-{m}small {margin-top: {n}*$large+{m}*$small

您可以在 SAAS 中编写一个循环来自动生成这些。