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

【问题标题】：Add the styles from one class to another class with LESS使用 LESS 将样式从一个类添加到另一个类
【发布时间】：2023-03-26 13:13:01
【问题描述】：

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

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

.one {
 color: blue;
}

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

【问题讨论】：

不确定确切的要求，但如果您只是想要一些额外的属性，可以使用纯 CSS 本身来完成。如果您想定义一个类（或 mixin）并重新使用它，那么您可以使用 Peter 的答案。

标签： less

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

【讨论】：

我需要在媒体查询中应用规则
@jdln 好的，现在检查一下。
我需要在不向 HTML 添加类的情况下执行此操作。原因是我有时想在不同的媒体查询中添加类，有时使用 JS。如果我可以简单地在媒体查询中扩展类中的样式，它将使我的 LESS 更加整洁。
您不必在 HTML 中添加类。

【解决方案2】：

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

.class {
  some rules here 
}

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

Does LESS have an "extend" feature?

【讨论】：

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

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

【讨论】：