Question

当使用Sass时，我会做一些像这样的全球性事物（我从CSS-tricks btw获得）

//  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-land中找到一个等价的解决方案。

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

如果有人尝试过这样的事情，或者可以立即看到错误;请提供你的两美分。我真的很想弄清楚，并想过问这个有天赋的SO社区。

提前谢谢你，他是一名球员！

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

我没有想过像Bass Jobsen建议的那样（虽然我现在已经看到他的方法基本上是少文档的做法），但我发明了一个我认为更多的mixin灵活。虽然它们的结果相似，但我认为以下解决方案允许更多自定义，并且更容易实现。

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

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

只记住两种尺寸，只需按照Bass Jobsen建议的方式进行操作就很容易了，但实际上，根据我想要控制的细粒度，我可以定义最多8种尺寸。不同的媒体大小（虽然我很少全部使用它们），而我上面的方法使得这个过程就像调用一个函数而不是定义8个不同的函数（就像我使用替代方法一样）。

希望这有助于某人。它节省了我很多时间。

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

2 个答案: