SASS -在不影响宽度的情况下将边距设置为0

Question

我对SASS完全陌生。

这是我的SASS代码

@mixin set-width-and-margin($label-width: 150px, $value-margin-left: 20px){
    .label-class {
        width: $label-width;
    }
    .input-class {
        margin-left: $label-width + $value-margin-left;
    }
}

.form-1 {
    @include set-width-and-margin();
}

.form-2 {
    @include set-width-and-margin(100px);
}

它输出以下CSS代码。

.form-1 .label-class {
    width: 150px;
}
.form-1 .input-class {
    margin-left: 170px;
}

.form-2 .label-class {
    width: 100px;
}
.form-2 .input-class {
    margin-left: 120px;
}

我希望添加另一个类.form-3，并将margin-left值设置为0 ，而不影响width。

这是想要的 CSS输出。

.form-3 .label-class {
    width: 150px;
}
.form-3 .input-class {
    margin-left: 0;
}

我唯一知道的解决办法就是这个。

.form-3 {
    .label-class {
        width: 150px;
    }
    .input-class {
        margin-left: 0;
    }
}

虽然它确实有效，但我想知道是否有更好的解决方案。

Answer 1

您只需使用两个参数调用mixin即可。您可以将$value-margin-left覆盖到-150px，以便得到的边距为0px。

.form-3 {
    @include set-width-and-margin(150px, -150px);
}

如果这还不够好的话，那么另一种方法是在调用mixin之后覆盖剩下的边距(或者，重新构建您的函数以更干净地容纳这一点)。

.form-3 {
    @include set-width-and-margin(150px);
    .input-class {
        margin-left: 0px;
    }
}