css - Sass @extend 行为类似于 LESS 和 @import

Question

我刚刚从 LESS 迁移到 SASS/SCSS，因为我在网上找到的大多数建议和新版本的 bootstrap。
但是我确实缺少 LESS 的一个重要特性，即每个类样式都可以被视为一个 mixin。

.social-icons__list {
  .list-inline;
}

问题是我不能对简单类使用@include，它应该用@mixin注释。在 placeholder 的情况下，我还需要用 % 注释类。

但是就像我的情况一样，我需要扩展现有的类并获得像使用占位符这样的行为。

在 SASS 的情况下，它生成以下 CSS

.list-inline, .social-icons__list {
  padding-left: 0;
  list-style: none;
  margin-left: -5px; }

但我只需要复制样式

 .social-icons__list {
  padding-left: 0;
  list-style: none;
  margin-left: -5px; }

我会接受它，但我还必须下载 bootstrap sass 源和 @import "../external-dependency/bootstrap-sass-3.3.7/assets/stylesheets/Bootstrap ”;

这行代码让编译器将所有样式从 bootstrap sources 复制到我的编译文件中。

所以也许有解决这些问题的办法。

如有任何帮助，我将不胜感激。

Answer 1

Sass 没有像 Less 这样的类混合特性。不过，您唯一真正的选择是 @extend，它的行为方式差异毫无值(value)，它将类名提升到您正在 @extend-ing 的类。

bootstrap 问题是一个单独的问题，就好像你想使用 BS 类作为 less mixins，你仍然需要在你的编译文件中使用它们。最好的策略是使用官方 bootstrap sass仅导入您正在使用的部件。还为大多数样式/组件定义了@mixins，因此如果您不需要任何实际类，您可以只导入mixins 文件并使用它们。