在 LESS 中使用规则集进行媒体查询

Question

当使用 Sass 时，我会做一些像这样的全局操作（我从 CSS-tricks 顺便说一句）

//  Variables for MQ's

$mq-mobile-portrait     : 320px !default;
$mq-mobile-landscape    : 480px !default;
$mq-tablet-portrait     : 768px !default;
$mq-tablet-landscape    : 1024px !default;
$mq-desktop             : 1382px !default;

然后我会像这样为媒体查询创建 mixins（我只会包括一些给你一个想法

// Mixins

// Both portrait and landscape
@mixin mobile-only {
    @media (max-width : $mq-mobile-landscape) {
        @content;
    }
}

// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait-only {
    @media (max-width : $mq-mobile-portrait) {
        @content;
    }
}

所以 Sass 有这个很棒的@content 因为它意味着我不必在 mixin 中声明内容但可以做一个 @include mixinName 并且它为任何 CSS 我需要跨不同文件放入其中的属性。我发现这对我的工作流程很有效。

下面是部分 .scss 文件中的示例：

section.footer {
    height: 90px;
    padding: 0 10px;
    @include mobile-portrait-only {
        padding-top: 10px;
        background: $gum;
        div.ftrLogo {
            display: inline-block;
            margin: 0;
            height: 70px;
            width: 45%;
            div.smlLogo {
            display: block;
            background: url('../images/svg/small-logo2.svg');
            width: 106px;
            height: 49px;
            margin: 0 auto;
            padding: 0;
            }
            p.footer {
                font-size: .375em;
                color: $white;
                text-align: center;
            }
        }
}

所以你可能会收集到 @content 允许你在你的文件中的任何地方调用一个空的媒体查询包装器（显然你必须将你的所有部分导入一个主文件）但这很棒。

今天我在一个项目中使用 LESS，我非常喜欢它，问题是我似乎无法在 LESS 领域找到等效的解决方案。

我正在阅读有关传递规则集的内容 http://lesscss.org/features/#detached-rulesets-feature 看起来它接近我想要的但我的大脑今天不理解它；我对明天很乐观。

如果有人尝试过这样的事情或者可以立即看到我的方法中的错误；请提供您的两分钱。我真的很想弄明白，想问问这个有天赋的 SO'ers 社区。

提前谢谢你，你是个球手！

Answer 1

//  Variables for MQ's
@mq-mobile-portrait: 320px;

// Mixins
.mobile-portrait-only(@rules) {
  @media (min-width: @mq-mobile-portrait) {
  @rules();
  } 
}

现在您可以使用以下代码：

div {
color: white;
  .mobile-portrait-only({
    color: white;
    width: 100%;
    max-width: 500px;
   });
}

以上会编译成CSS代码如下：

div {
  color: white;
}
@media (min-width: 320px) {
  div {
    color: white;
    width: 100%;
    max-width: 500px;
  }
}

所以分离规则是分配给变量的 {} 之间的规则：

@detached: {};

分离规则可以用作 mixin 的参数：

.mixin(@detached){}

你调用上面的 mixin 并使用分离规则作为参数：

.mixin({color: red;});

或

 @detached: {color: red;} // watch out for the last declaration wins rule for variables  
 .mixin(@detached);

在 mixin 中，你应该调用分离的规则集来复制它的属性和选择器（实际上你不复制而是插入它们以供处理）：

.mixin(@detached-rules) {
  @detached-rules(); // parenthesis are required here 
}

最后，对于您的示例，您的代码应如下所示：

    @gum: url();
    @white: white;

    //  Variables for MQ's
    @mq-mobile-portrait: 320px;

    // Mixins
    .mobile-portrait-only(@rules) {
      @media (min-width: @mq-mobile-portrait) {
      @rules();
      } 
    }


section.footer {
    height: 90px;
    padding: 0 10px;
    .mobile-portrait-only( {
        padding-top: 10px;
        background: @gum;
        div.ftrLogo {
            display: inline-block;
            margin: 0;
            height: 70px;
            width: 45%;
            div.smlLogo {
            display: block;
            background: url('../images/svg/small-logo2.svg');
            width: 106px;
            height: 49px;
            margin: 0 auto;
            padding: 0;
            }
            p.footer {
                font-size: .375em;
                color: @white;
                text-align: center;
            }
        }
        });
}

Answer 2

我没想过像建议的那样做（虽然我现在已经看到他的方法基本上是 less docs 做的），但我发明了一个我认为是更灵活一点。尽管结果相似，但我认为以下解决方案允许更多自定义并且更容易即时实施。

首先，我定义了我想要使用的不同尺寸 - 为简单起见，我将使用“移动优先方法”（意思是如果我不这样做）来做两个如果不包括媒体查询，规则将适用于所有尺寸，我应该只包括大于移动尺寸的查询）。

@tablet:~"(min-width:768px)";
@desktop:~"(min-width:1100px)";

然后是mixin：

.respond(@_size;@_rules){
 @media @_size {
    @_rules();
  }
}

并像下面这样使用：

.selector {
    background:green;
    .respond(@tablet,{
      color:red;
      background:blue;
    });
}

然后输出：

.selector {
   background:green;
}
@media (min-width:768px){
   .selector{
       color:red;
       background:blue
    }
}

只需要记住两个大小，按照建议的方式操作就足够了，但在实践中，根据我希望控件的粒度，我可能会定义到 8 种不同的媒体大小（尽管我很少使用它们），并且我上面的方法使过程就像调用一个函数而不是定义 8 个不同的函数（如果我使用替代方法，我会这样做）。

希望这对某人有所帮助。它为我节省了大量时间。

在 LESS 中使用规则集进行媒体查询

Using rulesets in LESS for media queries

less

media-queries