將動態值傳遞給SCSS

Question

我使用SCSS作爲樣式表，我只是習慣了它。

想對以下情況有所建議。

說我有三個div標籤與以下在線參數，可以

<div style="margin-top:10px">....</div> 
<div style="margin-top:-10px">....</div> 
<div style="margin-top:30px">....</div> 

現在我可以創建具有不同值的3 CSS類樣式，以避免行CSS。

但是，有沒有一種方法可以創建一個單獨的類作爲margin-top，併爲每個div傳遞值10px，-10px和30px。

Answer 1

您可以使用混入http://thesassway.com/advanced/pure-sass-functions

@mixin my-mixin($some-number) { 
    margin-top: $some-number; 
} 

現在我們用@include指令來插入我們的mixin的代碼。

div.some-class { 
    @include my-mixin(10px); 
} 

現在，如果你決定你還需要設置下邊距，你可以從一個地方做

Answer 2

你可以在這裏使用scss函數。你可以寫上邊距的功能和它接受一個參數

​​

以及每個單獨的div你可以發送不同的參數

div:first-child{ 
    @include margintop(10px); 
} 
div:nth-child(2){ 
    @include margintop(-10px); 
} 
div:nth-child(3){ 
    @include margintop(30px); 
} 

除此之外，我們不能訪問SCSS功能html和參數發送給它

此引用可幫助您linked question

希望它可以幫助