Question

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

因此，对于以下CSS，具有.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

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

.class {
  some rules here 
}

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

Does LESS have an "extend" feature?

Answer 3

您可以使用mixin和变量作为颜色

@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

在上面的演示中，将窗口调整为较小的宽度，您会发现文本会改变它的样式。

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

3 个答案: