时间戳

首页 > 解决方案 > 媒体查询永远不会在 scss 中呈现

css - 媒体查询永远不会在 scss 中呈现

问题描述

我已经开始在我的项目中使用Sass ，并且遇到了一个我在使用 vanilla CSS时从未遇到过的特殊问题。

由于某种原因，我的media查询永远不会被呈现（即使放在文件底部并且满足条件）；浏览器将始终呈现原始属性及其值，除非我使用!important（我不想这样做，因为这是不好的做法，只是不必要的）。

我已经尝试将media查询放在文件的顶部，但仍然没有。

这是我的代码：

#content .result{
    display: inline-block;
    width: 725px;
    border-right: $border;
    vertical-align: top;
}

// this will be shown in Chrome developer tools when the viewport reaches 1120 pixels or less, 
// but all the new properties will be crossed out and the browser will decide to use the old
// values instead - i have no idea why
@media screen and (max-width: 1120px){
    .result{
        // will all be crossed out
        display: block;
        width: auto;
        border-right: none;
    }
}

现在我不知道我是否遗漏了一些完全明显的东西（不太可能，我已经使用了数百次媒体查询），或者这只是Sass的一个怪癖，但非常感谢任何帮助。干杯。

编辑：如您所见，我没有定义其他样式。而且，媒体查询实际上是在原始属性声明之后将近 200 行。

图片

标签： csssass

解决方案

你有一个更具体的规则#content .search-results来赢得胜利 .search-results。

要么从第一条规则中删除#content选择器，要么将其添加到媒体查询中，这样两个选择器可以具有相同的特异性。

推荐阅读