css - 在 less 中复制 CSS 规则

标签 css less

<分区>

我的 .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 的规则,但这不是好的解决方案。你知道怎么做吗?

非常感谢您的宝贵时间。

最佳答案

无需重复规则:

.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

关于css - 在 less 中复制 CSS 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27320631/

上一篇:html - 将 div 置于彼此的中心

下一篇:html - 减少z-index从高到低的值

相关文章:

javascript - 即使在输入正确的值后 HTML 表单仍显示错误

html - 背景图像宽度和高度 100%

html - 在文本上 float 文本

html - 如何修复出现故障的下拉菜单?

Gulp 中的 Sass lint 任务 - 代码质量

javascript - LESS 和自动 CSS 缓存

javascript - 计算pinboard风格博客的容器高度(基于绝对元素)

css - 使用 Less/CSS 同时为所有选择器设置样式链接(<a> 标签)?

css - Chrome 源选项卡显示 .less 文件,这些文件不在我的解决方案中

html - 减少增量类的循环混合