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

如何在Sass中创建“变体类”？例如：

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

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

    .door {
        height: 100px;

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

您想制作一个

.bookshelf.small

变体。有没有一种方法可以使用mixin或其他会“冒泡”数据的东西在主元素中编写变体代码

.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 settings，它们会冒出来。但我不希望将其绑定到媒体查询，我希望将其绑定到特定的类（如果.bookshelf也有小类，请应用这些规则）。

有一个小问题。但是你应该非常小心地使用它。但这并不像你说的那么好

首先，它将主题类添加到选择器前面，所以您不能使用任何元素选择器。实际上，中有很多选择器帮助程序，但我没有找到任何能够帮助真正解析选择器字符串的帮助程序

第二，它不是对选择器进行分组。它在包含mixin的地方插入规则。但它会为您的样式生成更高优先级的规则，所以这可能是一个半途而废的解决方案

您可以挖掘或使用任何其他文件后处理工具来帮助您在不同的文件中分离样式

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

---

解决这一问题的一种方法是在“variation”类名之后使用&但前提是找到一种方法来对它们进行编码。因此，您只需编写

.small&{/***/}

，其中需要特定于主题的规则。但是如果没有办法把它们粘在一起的话，那会产生.small.bookshelf而不是.small.bookshelf。