-1

理想的には、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; }

そして、次のようにHTMLで好きなマージンをBRICKで構築します。

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

唯一の問題は、マージンを互いに「重ねる」ことができないため、これが機能しないことです。大きい方が「勝ち」、または指定された最後のマージンが「勝ち」ます（忘れました、どちらですか？）

私がやりたいことに対する良い解決策はありますか？

4

1 に答える 1

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 でループを記述できる場合があります。

于 2013-03-11T11:45:35.257 に答える