css - SASS 嵌套结构搞乱了@media 查询的优先级

Question

见下文fiddle :

HTML:

<div class='header'>Header</div>
<div class='main'>
    <div class='row'>
        <div class='cell lg-4'>
            content
        </div>
        <div class='cell lg-4'>
            content
        </div>
        <div class='cell lg-4'>
            content
        </div>
    </div>
</div>

SASS:

.header {
    display: none;
}

.main {
    .row {
        width: 100%;

        .cell {
            width: 100%;
            background-color: red;
            margin-bottom: 10px;
        }
    }
}

@media (min-width: 600px) {
    .header {
        display: block;
    }

    .cell {
        margin-bottom: 0;
        margin-left: 1px;
        float: left;
        &.lg-4 {
            width: 33%
        }
    }
}

通过查看这段代码，您会认为它做了以下事情:

• 默认显示移动设计:即单元格垂直堆叠并占据所有屏幕空间并且隐藏标题
• 600 像素以上:成为一行 3 个单元格，每个单元格占据水平空间的 1/3，并显示标题。

如果您在 fiddle 中尝试，您会看到在两个视口(viewport)(高于和低于 600 像素)中，单元格显示为垂直堆叠但是标题确实按照媒体中的指定隐藏或显示查询。

经过一段时间的搜索，我意识到只有当媒体查询采用与普通sass代码完全相同的嵌套结构时，查询才对单元格有效，即:

@media (min-width: 600px) {
    .header {
        display: block;
    }

    .main {
        .row {        
            .cell {
                margin-bottom: 0;
                margin-left: 1px;
                float: left;
                &.lg-4 {
                    width: 33%
                }
            }
        }
    }
}

为什么会发生这种情况，更重要的是，如何避免在媒体查询中重复使用相同的结构？ (这个 fiddle 的解决方法很简单，但我的实际代码有超过 10 到 20 个嵌套变量，因此为第 20 个元素添加媒体查询将迫使我添加 19 行无用的嵌套变量，代码很快就会过载并使其变得困难阅读)

也许我做错了，因为我对制作自己的响应式设计还很陌生，所以我是否错过了一些避免这种情况的最佳实践？

Answer 1

这是因为 .main .row .cell 在 @media 查询中比 .cell 更具体。

最好尽可能减少嵌套，以防止这种情况发生，因为绕行很麻烦。大量嵌套产生的其他一些问题是它使样式变得非模块化且难以重用，因为它们依赖于确切的结构，这也可能不利于性能。

我建议像这样拆分顶部部分:

Demo

.header {
    display: none;
}

.main {
    /* ... */
}

.row {
    width: 100%;
}

.cell {
    width: 100%;
    background-color: red;
    margin-bottom: 10px;
}

@media (min-width: 600px) {
    .header {
        display: block;
    }

    .cell {
        margin-bottom: 0;
        margin-left: 1px;
        float: left;
        &.lg-4 {
            width: 33%
        }
    }
}