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实现了最紧凑的代码。

要实现更干的CSS 代码，您可以使用CSS 预处理器。

它们被标记为dynamic-css。他们中的一些人比较少，而且很粗鲁。

---

少例子：

@small-menu: 10px;

menu {
    width: 100px;
}

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

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

---

萨斯示例：

$small-menu: 10px;

menu {
    width: 100px;
}

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

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