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

通过查看此代码，您会认为它执行以下操作：

默认显示移动设计：即单元格垂直堆叠并占用所有屏幕空间并隐藏标题
超过600px：成为一排3个单元格，占据每个水平空间的1/3并显示标题。

如果您在小提琴中尝试它，您会看到在两个视口中（600px以上和以下）单元格显示为垂直堆叠然而标题会隐藏或显示在媒体中指定查询。

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

@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比.cell查询中的@media更具体。

最好尽可能减少嵌套，以防止出现这种确切的情况，因为这是一种痛苦的解决方法。许多嵌套产生的其他一些问题是它使得样式非模块化并且难以重用，因为它们依赖于确切的结构，它也可能对性能不利。

我建议像这样拆分顶部：

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

SASS嵌套结构混淆了@media查询优先级

1 个答案: