LESS 编译器之间的输出不一致

Question

我写了一些 LESS 代码，可以根据浏览器宽度调整文本大小。可以将多个不同的元素及其参数发送到可重用的 mixin。

所有在线 LESS 编译器都输出了期望的结果。但是我从 Squarespace 的 LESS 编译器得到了不同的输出。

Squarespace 的编译器在第二次调用时似乎 "hang on" 旧变量值。

您能看到 Squarespace 的 LESS 编译器是如何达到其输出的吗？如果是，请分享可以进行的更改以使输出与所有其他编译器一致？

在线编译器的输出：（期望）

@media screen and (max-width: 1280px) {
  .homesCommunitiesLayout #pageHeroWrapper {
    font-size: 120px;
  }
}
@media screen and (max-width: 640px) {
  .homesCommunitiesLayout #pageHeroWrapper {
    font-size: 60px;
  }
}
@media screen and (max-width: 1280px) {
  #divisionTitle {
    font-size: 85px;
  }
}
@media screen and (max-width: 853.3333333333334px) {
  #divisionTitle {
    font-size: 56.666666666666664px;
  }
}
@media screen and (max-width: 426.6666666666667px) {
  #divisionTitle {
    font-size: 28.333333333333332px;
  }
}

Squarespace 编译器的输出：（不理想）

@media screen and (max-width: 1280px) {
    .homesCommunitiesLayout #pageHeroWrapper {
        font-size: 120px;
    }
}
@media screen and (max-width: 640px) {
    .homesCommunitiesLayout #pageHeroWrapper {
        font-size: 60px;
    }
}
@media screen and (max-width: 1920px) { //<---Gone wrong! Continuing to use element1!
    .homesCommunitiesLayout #pageHeroWrapper { 
        font-size: 180px;
    }
}
@media screen and (max-width: 1280px) {
    .homesCommunitiesLayout #pageHeroWrapper {
        font-size: 120px;
    }
}
@media screen and (max-width: 640px) {
    .homesCommunitiesLayout #pageHeroWrapper {
        font-size: 60px;
    }
}

LESS 源代码和 Link to code on Less2Css.org:

@maxSiteWidth: 1280px;
@fullWidth: @maxSiteWidth;

//Element 1 Parameters & Function Call
@fitTextElement1: ~".homesCommunitiesLayout #pageHeroWrapper";
@fitTextElement1Max: 120px;
@fitTextElement1Min: 50px;
@fitTextElement1BreakPoints: 2;
.fitText(@fitTextElement1; @fitTextElement1Max; @fitTextElement1Min; @fitTextElement1BreakPoints);

//Element 2 Parameters & Function Call
@fitTextElement2: ~"#divisionTitle";
@fitTextElement2Max: 85px;
@fitTextElement2Min: 26px;
@fitTextElement2BreakPoints: 3;
.fitText(@fitTextElement2; @fitTextElement2Max; @fitTextElement2Min; @fitTextElement2BreakPoints);

//Primary Looping Mixin
.fitText(@targetElement; @targetElementMaxSize; @targetElementMinSize; @targetElementBreakPoints) {
    .mixin-loop (@loopIteration) when (@loopIteration > 0) {

        @{targetElement} {
            .setBreakPointWidth(@loopIteration; @targetElementBreakPoints);
            @media screen and (max-width: @breakPointWidth) {
                .setFontSize(@loopIteration; @targetElementMaxSize; @targetElementMinSize; @targetElementBreakPoints);
                font-size: @targetElementFontSize;
            }
        }
        .mixin-loop(@loopIteration - 1);
    }
    .mixin-loop(0){}
    .mixin-loop(@targetElementBreakPoints);
}

//Function to set font size
.setFontSize(@loopNumber; @maxSize; @minSize; @breakPoints) {
    @targetElementFontSize: (@maxSize/@breakPoints)*@loopNumber;
    .resetFontSize(@targetElementFontSize; @minSize);
}

//Function to reset font size if below minimum desired
.resetFontSize(@calculatedSize; @minSize) when (@calculatedSize < @minSize) {
    @targetElementFontSize: @minSize;
}

//Function to set break point
.setBreakPointWidth(@loopNumber; @breakPoints) {
    @breakPointWidth: (@fullWidth/@breakPoints)*@loopNumber;
}

请注意，Squarespace 使用 LESS 1.3.3，因此您需要手动将 Less2Css 切换到该版本（尽管如果您不这样做，它似乎不会改变任何内容）。

Answer 1

在投入更多时间后，我发现我发布的代码存在很多问题。在 LESS 的旧版本中，变量将 "leak" 达到父范围，这是任何此代码都可以工作的唯一原因。

最后解决办法是放弃旧的1.3.3版本，改写最新的版本，重写整个代码不依赖这样的"leaks"。然后使用在线编译器进行预编译，直到 Squarespace 有一天更新他们的编译器。现在，我只需要在将其保存到 Squarespace 服务器上的文件之前对其进行预编译。

Answer 2

在不详细说明到底出了什么问题的情况下，我只想提一下，我遇到 LESS 和 Squarespace 编译器问题的主要原因是因为它与 LESS 不同。 Squarespace 之前使用 Less.js 的 Node 实现，然后在 Java 中重建编译器以获得优于 Node/Less.js.

的性能

所以关键要点是 Squarespace 的 LESS 编译器基于 Less.js 并且与开发人员使用的相同 LESS 编译器不同。你肯定会发现编译不一样的奇怪场景。

我会将您发现的任何错误提交到官方仓库：https://github.com/Squarespace/less-compiler。他们的工程师反应灵敏！

LESS 编译器之间的输出不一致

Inconsistent Output between LESS Compilers

less

squarespace

media-queries

less-mixins