Question

如何在Sass中处理“变异类”？例如：

.bookshelf {
    color: brown;
    height: 100px;

    .panel {
        trimmed: no;
        height: 10px;
    }

    .door {
        height: 100px;

        .knob {
            shape: circle;
            height: 10px;
        }
    }
}

您想要进行.bookshelf.small变体。有没有办法使用mixins或者“冒泡”数据的东西在主元素中编写变体代码？

.bookshelf {
    color: brown;
    height: 100px;
    @include small-version {
        height: 50px;
    }

    .panel {
        trimmed: no;
        height: 10px;
        @include small-version {
            height: 5px;
        }
    }

    .door {
        height: 100px;
        @include small-version {
            height: 50px;
        }

        .knob {
            shape: circle;
            height: 10px;
            @include small-version {
                height: 5px;
            }
        }
    }
}

mixin的输出将是

.bookshelf.small {
    height: 50px;

    .panel {
        height: 5px;
    }

    .door {
        height: 50px;

        .knob {
            height: 5px;
        }
}

有些事情看起来很有希望，例如@ at-root函数和@content函数，但这两种情况都不适用。我知道如果我写@media设置，他们会冒泡。但我不希望这与媒体查询绑定，我希望这与特定的类绑定（如果.bookshelf也有小类，应用这些规则）。

Answer 1

有一个小小的黑客。但你应该非常认真地使用它。它并不像你问的那么好。

首先，预先主题类到选择器，因此您不能使用任何元素选择器。在docs中实际上有很多选择器助手，但我没有找到任何可以帮助实际解析选择器字符串。

其次，它不是将选择器分组。它在包含mixin的地方插入规则。但它会为您的样式生成更高优先级的规则，因此它可能是一种解决方案。

您可以挖掘postcss parser或任何其他文件后期处理工具，它们可以帮助您在不同的文件中分隔您的样式。

@mixin small-version {
  @at-root .small#{&} {
    @content;
  }
}

.bookshelf {
  color: brown;
  height: 100px;
  @include small-version {
    height: 60px;
  }

  .panel {
    trimmed: no;
    height: 10px;

    @include small-version {
      height: 5px;
    }
  }

  .door {
    height: 100px;

    .knob {
      shape: circle;
      height: 10px;
    }
  }
}

Gist link

在SASS中为变体/主题类冒泡规则

1 个答案: