SASS嵌套结构扰乱@media查询优先级

Question

参见下面的小提琴

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 of :变成一行3个单元格，每个单元格占用水平空间的1/3，并显示标题。

如果您在小提琴中尝试它，您将看到在两个视图端口(高于和低于600 as )中，单元格都显示为垂直叠加的，但是标题确实被隐藏或显示在媒体查询中指定的位置。

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

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

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

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

也许我做错了这件事，因为我对自己的响应性设计还很陌生，那么我是不是遗漏了一些避免这种情况的最佳实践呢？

Answer 1

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

最好的做法是尽量减少筑巢，以防止这种情况的发生，因为这是一个痛苦的周遭。许多嵌套产生的其他一些问题是，它使样式变得非模块化和难以重用，因为它们依赖于精确的结构，这也会影响性能。

我建议把上面的部分分割成这样：

演示

.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%
        }
    }
}