SASS mixin 包含代码块，具体取决于主体是否具有类（或祖父）

Question

我正在尝试创建一个 mixin，它允许我根据 body 是否具有某个类来灵活地编写代码块。

@mixin when($class) {

    body.#{$class} & {

        @content;

    }
}

用例

#hero {

    @include when('theme--dark') {

        span { 

            content: 'Good Evening'; 

        }
    }
}

#hero {

    @include when('page-landing') {

        button.cta { 

            padding: 3rem 5rem;

            font-size: 3rem;

            background-color: $green;
        }
    }
}

如果能做到以下几点就更好了

@mixin when($parent, $class) {

    #{$parent}.#{$class} & {

        @content;

    }

}

#hero {

    @include when('body','page-landing') {

        button.cta { 

            padding: 3rem 5rem;

            font-size: 3rem;

            background-color: $green;

        }
    }
}

以前的代码都不起作用，甚至不确定语法，但想知道是否可以产生类似的东西，感谢任何帮助！

Answer 1

虽然您的方法绝对没问题，但这里有一个更简洁的实现，它在您要检查的选择器数量方面提供了更多的灵活性。

@mixin when($selectors...) {
  $n: "";
  
  @each $selector in $selectors {
    $n: str-insert($n, "#{$selector}", str-length($n) + 1);
  }
  
  #{$n} {
    @content;
  }
}

#hero {
  @include when('body', '[dark-mode=true]', '.primary') {
    color: #fff;
  }
}