css - 使用父选择器减少多个类规则

Question

我有以下 HTML 结构：

<div class="block">
  <div class="block--is-disabled block--is-focused">Block</div>
</div>

还有一些 LESS 代码：

// LESS
.block {
  &--is-disabled {
    // some styles
  }

  &--is-focused {
    // some styles
  }
}

是否可以应用样式，例如.block--is-disabled.block--is-focused使用 LESS 父选择器？我唯一达到的是：

// LESS 
.block {
  &--is-focused & {
    &--is-disabled {
      // some styles
    }
  }
}

使用以下 CSS 输出：

.block--is-focused .block--is-disabled {
  // some styles
}

但我需要得到的是下一个 CSS：

.block--is-disabled.block--is-focused {
  // some styles
}

标签： cssless

Answer 1

你可以这样做：

.block {
    &--is-focused&--is-disabled {
        ...
    }
}