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

然后 BRICK 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中编写一个循环来自动生成这些循环。

以块/块的形式建立边距/填充

1 个答案: