Question

我有一个包含一些修饰符的标题：

.header {
  font-weight: bold;
}
.header--main {
  font-family: 'Segoe UI', sans-serif;
}
.header--type-error {
  color: red;
}
.header--main.header--type-error {
  font-size: 1.2em;
}

更时尚：

.header {
  font-weight: bold;
  &--main {
    font-family: 'Segoe UI', sans-serif;
  }
  &--type-error {
    color: red;
  }
  &--main&--type-error {
    font-size: 1.2em;
  }
}

如果我想用标题和他的mod扩展Error__header，我可以这样做

.Error__header {
  @extend .header;
  @extend .header--main;
  @extend .header--type-error;
  @extend .header--main.header--type-error;
}

是否有解决方案可以在不编写@extend .header--main.header--type-error的情况下获得效果？

Answer 1

出于显而易见的原因，如果不做任何事情，你就无法取得一些效果：）

但是，在您的情况下，您可能希望placeholder selector与root reference一起使用：

.header,
$foo {
  font-weight: bold;
  &--main,
  /$foo {
    font-family: 'Segoe UI', sans-serif;
  }
  &--type-error,
  /$foo {
    color: red;
  }
  &--main&--type-error,
  /$foo {
    font-size: 1.2em;
  }
}

.Error__header {
  @extend $foo;
}

将等于您编写的代码。如果您不想生成.Error__header--main.Error__header--type-error生成的所有选择器，并且每个选择器只添加.Error__header，那么您可以这样做：

.header {
  &,
  /$foo {
    font-weight: bold;
  }
  &--main,
  /$foo {
    font-family: 'Segoe UI', sans-serif;
  }
  &--type-error,
  /$foo {
    color: red;
  }
  &--main&--type-error,
  /$foo {
    font-size: 1.2em;
  }
}

.Error__header {
  @extend $foo;
}

这将编译为

.header,
.Error__header {
  font-weight: bold;
}
.header--main,
.Error__header {
  font-family: 'Segoe UI', sans-serif;
}
.header--type-error,
.Error__header {
  color: #f00;
}
.header--main.header--type-error,
.Error__header {
  font-size: 1.2em;
}

如何使用Stylus扩展相互修饰符？

1 个答案: