html - 在类中放置@media 标签以简化和避免重复

Question

有关完整的 css/html 摘录，请参阅:https://jsfiddle.net/menelaosbgr/jbnsd9hc/1/

我有以下具体的 2 个定义:

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    bottom: 0px;
    right: 0px;
}

@media screen and (min-width: 480px) {
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 120px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        bottom: 0px;
        right: -50px;
    }
}

我想重构代码使其更优雅。我尝试了以下但没有用:

     /* Dropdown Content (Hidden by Default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            bottom: 0px;
            right: 0px;
@media screen and (min-width: 480px) {
 bottom: 0px;
 right: -50px;
}
}

澄清:我怎样才能重写上面的内容以避免重复？

Answer 1

Validate, validate, validate .您根本无法在 CSS 中做到这一点。规则集不能包含媒体查询。

你可以使用SASS来完成之后可以将其转换为 CSS。