構建利潤/塊墊襯/件

-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這樣想：

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

唯一的問題是，這不起作用，因爲邊距不能在彼此的「頂部」「堆積」。無論是較大的一個「勝利」或指定的最後一個保證金「贏」（我忘了，這是什麼？）

有什麼好的解決方案，我想做什麼？

來源

2013-03-11 user2015453

這看起來像很多綁定演示文稿到你的標記地獄。 – cimmanon 2013-03-11 12:29:23

@cimmanon是我開始認爲這是一個壞主意。一個更聰明的方法是隻輸入諸如「最高保證金：$ large + 3 * $ small」之類的東西。無論我在SCSS文件中需要什麼元素，你會不會說？ – user2015453 2013-03-11 12:30:57

@cimmanon你有沒有downvote這個問題btw？ – user2015453 2013-03-11 12:31:23

您可能必須做一些事情，如：

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

但是，你需要的命名規則是

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

您可以定義81條規則（9×9）在SAAS中編寫一個循環以自動生成這些循環。

來源

2013-03-11 11:45:35

構建利潤/塊墊襯/件

回答

相關問題