选择者的守卫从Less到Sass

Question

我正在从Less切换到Sass，我想知道我是如何做到的？

In Less我可以为规则集添加一个守护程序，这样只有在我将has-badge变量设置为启用时它才会编译（它不是从其他地方调用的mixin，而是一个自包含的块）。

.badge when (@has-badge = enabled){
    display: inline-block; border-radius: $badge-radius; padding: $badge-padding; min-width: 1em; text-align: center; font-size: $badge-font-size; line-height: 1em;
}

@has-badge: enabled;

Answer 1

您可以在SASS中使用简单的if / else语句，并将字符串与以下示例中的值进行比较：

.badge {
    @if $has-badge == "enabled" {
        display: inline-block; border-radius: $badge-radius; padding: $badge-padding; min-width: 1em; text-align: center; font-size: $badge-font-size; line-height: 1em;
    }
}