SCSS重複值？

Question

我正試圖解決SCSS問題，我會如何解決這個問題：

我想在1px和1000px之間有一個邊距，並且有一個類。

例如 .MarginTop-X

X是在哪裏可以寫任何值。很顯然，我寫不出

.MarginTop-1 {margin-top:1px} 
.MarginTop-2 {margin-top:2px} 
.MarginTop-3 {margin-top:3px} 
.MarginTop-4 {margin-top:4px} 

等等

Answer 1

不知道這樣做的效用，但是......

薩斯：

@mixin marginTop($amount) { 
    .marginTop-#{$amount} { 
    margin-top: unquote($amount + 'px'); 
    } 
} 

@include marginTop(1); 
@include marginTop(100); 

編譯CSS：

.marginTop-1 { 
    margin-top: 1px; 
} 

.marginTop-100 { 
    margin-top: 100px; 
} 

Answer 2

那麼你需要一個@for循環來做到這一點。

SCSS：

$class-slug: ".MarginTop"; 
$stop-loop: 4; 

@for $i from 0 through $stop-loop { 
    #{$class-slug}-#{$i} { 
    margin-top: #{$i}px; 
    } 
} 

編譯CSS：

.MarginTop-0 { 
    margin-top: 0px; } 

.MarginTop-1 { 
    margin-top: 1px; } 

.MarginTop-2 { 
    margin-top: 2px; } 

.MarginTop-3 { 
    margin-top: 3px; } 

.MarginTop-4 { 
    margin-top: 4px; }