css - 使用 CSS 进行类和媒体查询

Question

我有一个可以滑动打开和关闭的菜单栏。它的关闭状态也是屏幕足够小时的样子。所以，我基本上有两次相同的样式:一次作为类，一次作为媒体查询。

有什么办法可以避免这种情况吗？

编辑 ¹:

我想避免使用媒体查询样式和类。如果有一些聪明的方法可以通过类和媒体查询应用相同的样式，那就太好了。

编辑²:

代码示例(用于说明目的):

menu {
    width: 100px;
}

menu.closed { /*triggered via class addition in javascript */
    width:10px;
}

@media (max-width:1000px) {
    menu { /*notice how this is the same as the closed class*/
        width:10px;
    }
}

Answer 1

您已经使用纯 CSS 实现了最紧凑的代码。

实现更多dry CSS 代码，您可以使用 CSS 预处理器。

它们被标记为 dynamic-css .其中一些是 less , 和 sass .

---

Less example :

@small-menu: 10px;

menu {
    width: 100px;
}

menu.closed {
    width: @small-menu;
}

@media (max-width:1000px) {
    menu {
        width: @small-menu;
    }
}

---

Sass example :

$small-menu: 10px;

menu {
    width: 100px;
}

menu.closed {
    width: $small-menu;
}

@media (max-width:1000px) {
    menu {
        width: $small-menu;
    }
}