使用 LESS 将样式从一个 class 添加到另一个 class

Question

我有 2 个 class 不同风格的。在使用 LESS 的媒体查询中，我可以将样式从一个 class 应用到另一个吗？

因此，对于以下 CSS，class 为 .one 的元素是蓝色但不是粗体。通过设置媒体查询，我还希望它是粗体和 2ems。

.one {
 color: blue;
}

.two {
 font-weight: bold;
 font-size: 2em;
}

Answer 1

尝试

.one {
 color: blue;
}

.two {
 font-weight: bold;
 font-size: 2em;
}
@media screen {
   .one{
       .one;
       .two;
   }
}

将创建这个 css:

.one {
  color: blue;
}
.two {
  font-weight: bold;
  font-size: 2em;
}
@media screen {
  .one {
    color: blue;
    font-weight: bold;
    font-size: 2em;
  }
}

Answer 2

您可以使用混入和颜色变量

@default_color : "#000";
@color : blue;

.font-style(@c: @default_color) {
  color: @c;
  font-weight: bold;
  font-size: 2em;
}

.one {
 color: @color;
}

.two {
  .font-style()
}

@media (max-width:420px) { 
  .one {
    .font-style(@color)
  }
}

Codepen demo

在上面的演示中，将 window 的宽度调整到更小的宽度，您会发现文本的样式发生了变化。

Answer 3

:extend 可以做到这一点。在下面的代码中，如果 .class2 在媒体查询中，那么对于该宽度，将应用 .class 中的样式。

.class {
  some rules here 
}

.class2 {
    &:extend(.class);
    ...
}

Does LESS have an "extend" feature?

使用 LESS 将样式从一个 class 添加到另一个 class

Add the styles from one class to another class with LESS

less