将动态值传递给 SCSS答案

【问题标题】：Pass dynamic Values to the SCSS将动态值传递给 SCSS
【发布时间】：2016-12-31 08:12:50
【问题描述】：

我正在使用 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 。

【问题讨论】：

标签： css sass

【解决方案1】：

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

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

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

现在，如果您决定还想设置 margin-bottom，您可以从一个地方完成

【讨论】：

【解决方案2】：

您可以在这里使用 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

希望对你有帮助

【讨论】：