生成scss多個css類*

我有以下css helper類。所以我的問題是，有沒有更好的方法來做到這一點？或者我可以在scss中生成這樣的類來使其更清潔和更好。生成scss多個css類*

謝謝。

.m-1 { margin: 1px !important; } 
.m-2 { margin: 2px !important } 
.m-3 { margin: 3px !important } 
.m-4 { margin: 4px !important } 
.m-5 { margin: 5px !important } 
.m-6 { margin: 6px !important } 
.m-7 { margin: 7px !important } 
.m-8 { margin: 8px !important } 
.m-9 { margin: 9px !important } 
.m-10 { margin: 10px !important }

來源

2014-02-07 Mahmoud

雖然它無關，與你的問題：你應該檢查它是否真的有必要使用'important'！有時候沒有簡單的方法來避免它，但是你應該首先嚐試找到一種不使用它的方式，因爲在很多情況下，這會產生更多的問題，特別是在這樣一個輔助類中。 –

你自己嘗試過什麼嗎？ – cimmanon

@ t.niese23這不是我的問題的答案。但是，謝謝任何方式。 – Mahmoud

使用SASS

@for $i from 1 through 10 { 
    .m-#{$i} { margin: 1px * $i !important; } 
}

來源

2014-02-07 12:52:44

感謝您的時間，這就是我一直在尋找的。謝謝 – Mahmoud

在循環過程中，是否有可能增加5個值。而不是遞增單步遞增5的步驟0 5 10 15像這樣 –

@Vikranth您可以使用for循環的數學運算，例如'@for $ I從0到3'，並在必要時乘以5。或者你可以使用'$ I = 0; @ $ I <20 {$ I = $ I + 5; '' –

生成scss多個css類*

回答

相關問題