将动态值传递给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

希望它可以帮助