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;
    }
}

SASS - 将边距设置为0而不影响宽度

1 个答案: