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：在媒体查询中组成类名

0 个答案: