Question

我有这样的东西。无文件

.form-section {

.special-check {
    width: 100%;
    display: block;
    .ui-selectmenu-button();
    width: auto;
    overflow: hidden;
}

将会是什么。生成.form-section .special-check我希望有类似.form-section .special-check, .something之类的东西，但我不知道怎么做更少。 ofc我可以复制和限制.something的规则但这不是好的解决方案。你知道怎么做吗？

非常感谢你的时间。

Answer 1

无需复制规则：

.something {
  width: 100%;
  display: block;
  overflow: hidden;
}   

.form-section {
   .special-check:extend(.something){};
}

或

.form-section {
   .special-check {
      width: 100%;
      display: block;
      overflow: hidden;
   }
}

.something:extend(.form-section .special-check){};

结果是一样的，它只取决于谁正在扩展谁

编译输出

.form-section .special-check,
.something {
  width: 100%;
  display: block;
  overflow: hidden;
}

进一步参考：http://lesscss.org/features/#extend-feature-extending-nested-selectors

Answer 2

替代地

.form-special {
   width: 100%;
   display: block;
   .ui-selectmenu-button();
   width: auto;
   overflow: hidden;
}

.form-section { .special-check { .form-special; }}
.something { .form-special; }

少量复制CSS规则

2 个答案: