Question

我最近从SASS切换到Less（work），并想知道是否可以从Less（使用mixin）获得此输出：

footer {
  width: 768px;
   @media only screen and (min-width: 992px) {
    width:900px;
   }
   @media only screen and (min-width: 1200px) {
     width:1200px;
   }
}

我似乎只能在单独的断点中获取输出（而不是在选择器下）：

@media only screen and (min-width: 720px) and (max-width: 959px) {
 footer {
  width: 768px;
 }
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
 footer {
   width: 3939px;
 }
}

这是我一直在使用的混音：

.respond-to(@respondto; @rules) when (@respondto = "lg") {
  @media only screen and (min-width: 1200px) {
    @rules();
  }
}
.respond-to(@respondto; @rules) when (isnumber(@respondto)) {
  @media only screen and (min-width: @respondto) {
   @rules();
  }
}

然后像这样使用它：

div.class {
   .respond-to(120px, {
     float:left;
   });
   .respond-to("lg", {
     float:none;
   });
}

任何帮助将不胜感激！

Answer 1

简答：

不，你不能通过使用Less mixins来获得你需要的输出（除非你最终做了一些非常丑陋的黑客攻击）。

长答案：

Less，SASS等（正如您所知）CSS预处理器。它们的主要用途是能够编写DRY代码并更快地创建CSS（还有其他特权，但这些是使用它们的主要原因）。因此，如果预处理器产生的输出不是有效的CSS代码，则预处理器将无用 - 因为最终它是实际在您的项目中使用的CSS。

下面的代码段不是有效的CSS，因为不支持这样的结构，所以Less永远不会产生类似的输出。

^{注意：这是一个有效的Less代码结构，因为Less支持选择器和媒体查询的嵌套。}

footer {
  width: 768px;
   @media only screen and (min-width: 992px) {
    width:900px;
   }
   @media only screen and (min-width: 1200px) {
     width:1200px;
   }
}

以下是显示无效CSS 的含义的片段。检查媒体查询如何影响color，但不影响background。

＆＃13;

/* Invalid CSS */
footer {
  background: beige;
   @media only screen and (min-width: 600px) {
    background: blue;
   }
   @media only screen and (min-width: 700px) {
     background: green;
   }
}

/* Valid CSS */

footer {
  color: red;
}
@media only screen and (min-width: 600px) {
  footer{
    color: blue;
  }
}
@media only screen and (min-width: 700px) {
  footer{
    color: green;
  }
}

＆＃13;

<footer>This is a footer</footer>

＆＃13;

来到你的mixin，你可以重新编写它，如下面的代码片段

.respond-to(@respondto; @rules){
     & when (@respondto = "lg") {
      @media only screen and (min-width: 1200px) {
        @rules();
      }
    }
    & when (isnumber(@respondto)) {
      @media only screen and (min-width: @respondto) {
       @rules();
      }
    }
}

或者像下面那样保持代码干净。

.respond-to(@respondto; @rules){
  .set-width(@respondto); // call to set the media query width depending on input
  @media only screen and (min-width: @width) {
    @rules();
  }
}
.set-width(@respondto) when (@respondto = "lg") {
  @width: 1200px;
}
.set-width(@respondto) when (isnumber(@respondto)) {
  @width: @respondto;
}

嵌套媒体查询输出

1 个答案: