是否有与此 SASS 功能等效的 LESS？答案

【问题标题】：Is there a LESS equivalent to this SASS functionality?是否有与此 SASS 功能等效的 LESS？
【发布时间】：2015-03-05 22:04:13
【问题描述】：

我正在研究一些东西，包括媒体查询和大量重复代码——即使是使用 mixins。

我遇到了一个包含此 SASS 代码的网站：

html{
  @include responsive("font-size", 11px,
    (
       600px: 12px,
       800px: 13px,
      1180px: 14px,
      1300px: 15px,
      1750px: 16px,
      1900px: 17px,
      2100px: 18px,
      2400px: 19px
    )
  );
}

不幸的是，没有进一步提到“响应式”，所以我对此了解不多，但我相信目标是使用规则创建媒体查询输出。

我知道 LESS 中的规则集，但是否可以像他们在这里完成的那样链接规则集？

提前致谢。

【问题讨论】：

可以使用相对单位(%, em) :D
如果你问我，这是一种非常低效的创建媒体查询的方法。当然，这里和那里的一些规则是好的，但是对于整个网站，这段代码会变得非常臃肿，非常快。
不确定该 mixin 在 SASS 中的作用，但似乎循环会有所帮助。
responsive() 是用 sass 制作的自定义 mixin，而不是内置的 mixin/function
@Mardzis - 这将如何运作？

标签： sass less

【解决方案1】：

这可能是您对 Less 的最佳选择。基本上，我们使用 2D 数组列表（具有媒体大小和属性值）作为 mixin 的参数。更多解释请参考内联 cmets。

@array: 600px 12px, 700px 13px, 800px 14px; /* 2D array with media size & value */
.responsive(@property; @defaultValue; @array){

    @{property}: @defaultValue; /* default setting*/

    .loop-media-query(@index) when (@index > 0){ /* loop for media query */
        @mediaSize: extract(extract(@array,@index), 1); /* first array val is media size */
        @font-size: extract(extract(@array,@index), 2); /* second array val is property value */

        @mediaQuery: ~"(min-width: @{mediaSize})"; /* form the media query */

        @media @mediaQuery{ /* output the settings */
            @{property}: @font-size;
        }

        .loop-media-query(@index - 1);
    }

    .loop-media-query(length(@array));
}

.output{
    .responsive(font-size; 11px; @array);
}

编译后的 CSS：

.output {
  font-size: 11px;
}
@media (min-width: 800px) {
  .output {
    font-size: 14px;
  }
}
@media (min-width: 700px) {
  .output {
    font-size: 13px;
  }
}
@media (min-width: 600px) {
  .output {
    font-size: 12px;
  }
}

【讨论】：

@dotnetnoob：谢谢伙计:)