在 less [重复] 中复制 CSS 规则答案

【问题标题】：Duplicating CSS rules in less [duplicate]在 less [重复] 中复制 CSS 规则
【发布时间】：2015-02-03 21:40:26
【问题描述】：

我的 .less 文件中有类似的东西

.form-section {

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

哪个会。生成.form-section .special-check，我想要这样的东西.form-section .special-check, .something，但我不知道怎么做。我可以复制并粘贴.something 的规则，但这不是一个好的解决方案。你知道怎么做吗？

非常感谢您的宝贵时间。

【问题讨论】：

标签： css less

【解决方案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

【讨论】：

是的，但你在这里有重复的规则。我只想像这样 .form-section .special-check, .something 有这些规则一次
哦，对了，看看我的更新
好的，就是这样 :) 非常感谢

【解决方案2】：

或者

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

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

【讨论】：