css - 媒体查询中的较少扩展不起作用

标签 css class less extend helper

<分区>

我的 less extend 不工作,我不知道为什么这里是我文件中的一些片段!

此处来自global.less:

// Global Modifier
.is--rounded { .border-radius(); }

.is--block { display: block !important; }
.is--inline { display: inline !important; }
.is--inline-block { display: inline-block !important; }
.is--hidden { display: none !important; }
.is--invisible { visibility: hidden !important; }

这来自 header.less works

.header-gray {
    .shop--navigation {
        &:extend(.is--hidden);
    }
}

这来自相同的 header.less 但没有用

@media screen and (min-width: 480px) {
    .header-gray {
        .shop--navigation {
            &:extend(.is--block);
        }
    }
}

有语法错误吗?或者问题出在哪里?

最佳答案

来自 LESS 文档:“在媒体声明中写入的扩展应该只匹配同一媒体声明中的选择器”

因为您的第二个示例包含在媒体查询中,所以 .is--block 声明需要匹配

关于css - 媒体查询中的较少扩展不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31245460/

上一篇:css - 视频不在移动设备上流式传输,只有在视频不播放时才需要使用占位符图像

下一篇:java - jquery-svg-pan-zoom 库缩放

相关文章:

html - 使用 Flexbox 显示不工作的内容 HTML CSS

jquery - ASP.NET MVC 5 不呈现 jQuery UI CSS 包

javascript - 实例化动态类

css - 是否可以将元素的宽度四舍五入为可被 8 整除的数字?

twitter-bootstrap - LESS & Bootstrap : error evaluating function `darken` : color. toHSL 不是文件中的函数

html - 纯 CSS 图像缩略图

css - 不同高度的动画元素在 CSS 中以相同的速度增长

java - 如何将我正在处理的类与 main 放在一个文件中?

javascript - Nodejs 需要带有初始值设定项的类

css - 使用 Less 动态定位元素