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，以便生成的margin-left 为0px。

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

如果这还不够好，另一种方法是覆盖调用 mixin 后留下的边距（或者，重新制作函数以更干净地适应它）。

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