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

您可以在此处使用scss函数。您可以为margin-top编写一个函数，并接受一个参数

 @mixin margintop($top){
        margin-top:$top;
    }

并且对于每个单独的div，您可以发送与

不同的参数

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

除此之外，我们无法访问html中的scss函数并向其发送参数

此引用可能对您有用linked question

希望有所帮助

Answer 2

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

现在我们使用@include指令插入我们的mixin代码。

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

现在，如果您决定要设置margin-bottom，则可以从一个地方进行设置