如何使用 LESS 更有效地使用媒体查询？

Posted 2023-03-06

【中文标题】如何使用 LESS 更有效地使用媒体查询？

【英文标题】：How can I use media queries more efficiently with LESS?

【发布时间】：2012-11-05 08:07:08

【问题描述】：

我正在使用 Bootstrap 和 LESS 进行响应式网页设计。

过去我喜欢 LESS 的原因之一是它可以将 html 元素的所有属性保持在一起。

下面是一些定义.sponsors 块的规则，然后是当视口>= 768px 时应用于该块内的元素的规则

我不喜欢一条规则需要大量额外的代码，也不喜欢这条规则与其他规则的区别。也感觉不对。

有什么更好的方法来做这个/组织这个？我是否需要先将所有内容分解为***@media 组？

.sponsors

    li
    
        .thumbnail
        
            padding-top:20px;
            padding-bottom:15px;
            img
            
                display:block;
                margin:0 auto;
            
        
    



@media (min-width: 768px)


    .sponsors
    
        li
        
            .thumbnail
            
                padding-bottom:0px!important;
            
        
    

如果有类似的东西会很甜蜜：

.thumbnail

    &[@mediaWidth >=768]
    
    padding-bottom:0px!important;
    

【参考方案1】：

我认为您可以嵌套媒体查询，LESS (>1.3.0) 会在编译期间将它们“冒泡”到样式表的根目录。

.sponsors

    li
    
        .thumbnail
        
            padding-top:20px;
            padding-bottom:15px;

            @media (min-width: 768px) 
                padding-bottom:0px!important;
            

            img
            
                display:block;
                margin:0 auto;
            
        
    

【讨论】：

suhweet！迫不及待想试试这个！！ （手指交叉）