css - CSS：在媒体查询中组合类名

Question

我在一个类中有一些可以独立使用的样式，但是当满足媒体查询条件时，我也想将这些样式应用于另一个类。下面是一个例子。

我有两个班级：light和dark。

.light {
    border: 1px solid;
    background-color: white;
}

.dark {
    border: 1px solid black;
    background-color: black;
    color: white;
}

<h2>light</h2>
<div class="light">foo</div>
<h2>dark</h2>
<div class="dark">foo</div>

现在我想组合这些类名来创建一个新版本：移动设备上的浅色（即窄屏），桌面上的深色（即宽屏）。

我知道这样做的唯一方法是复制我的样式：

@media (max-width: 499px) {
    .lightOnMobileAndDarkOnDesktop {
        border: 1px solid;
        background-color: white;
    }
}

@media (min-width: 500px) {
    .lightOnMobileAndDarkOnDesktop {
        border: 1px solid black;
        background-color: black;
        color: white;
    }
}

<h2>light on mobile, dark on desktop</h2>
<div class="lightOnMobileAndDarkOnDesktop">foo</div>

但是，我想在不复制我的类的样式和没有 JavaScript 的情况下实现这一点。

这是一些伪代码，说明了我想要实现的目标：

@media (max-width: 499px) {
    .lightOnMobileAndDarkOnDesktop {
        @extend .light;
    }
}

@media (min-width: 500px) {
    .lightOnMobileAndDarkOnDesktop {
        @extend .dark;
    }
}

如果今天没有任何方法可以达到这种效果，那么我的下一个问题是：是否有任何关于 CSS 的建议可以让我在未来实现这一目标？

标签： css