Less 较少编译器之间的输出不一致

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

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

第二次调用Squarespace的编译器时，它似乎“挂起”了旧的变量值

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

在线编译器的输出：（需要）

来自Squarespace编译器的输出：（不需要）

@媒体屏幕和（最大宽度：1280px）{
.HomeCommunities布局#pageHeroWrapper{
字体大小：120px；
}
}
@媒体屏幕和屏幕（最大宽度：640像素）{
.HomeCommunities布局#pageHeroWrapper{
字体大小：60px；
}
}
@媒体屏幕和（最大宽度：1920px）{//0）{
@{targetElement}{
.setBreakPointWidth（@loopIteration；@targetElementBreakPoints）；
@媒体屏幕和（最大宽度：@width）{
.setFontSize（@loopIteration；@targetElementMaxSize；@targetElementMinSize；@targetElementBreakPoints）；
字体大小：@targetElementFontSize；
}
}
.mixin循环（@loopIteration-1）；
}
.mixin循环（0）{}
.mixin循环（@targetElementBreakPoints）；
}
//函数设置字体大小
.setFontSize（@loopNumber；@maxSize；@minSize；@breakPoints）{
@targetElementFontSize:（@maxSize/@breakPoints）*@loopNumber；
.resetFontSize（@targetElementFontSize；@minSize）；
}
//如果低于所需的最小值，则可重置字体大小
.resetFontSize（@calculatedSize；@minSize）何时（@calculatedSize<@minSize）{
@targetElementFontSize:@minSize；
}
//函数设置断点
.setBreakPointWidth（@loopNumber；@breakPoints）{
@断点宽度：（@fullWidth/@breakPoints）*@loopNumber；
}

---

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

在这方面投入了更多的时间，我发现在发布代码时，代码存在很多问题。在旧版本的LESS中，变量会“泄漏”到父作用域，这是所有这些代码工作的唯一原因

---

最终，解决方案是放弃旧的1.3.3版本，为最新版本编写代码，重写整个代码，不依赖于这种“泄漏”。然后使用在线编译器进行预编译，直到Squarespace某天更新其编译器。目前，我只需在将其保存到Squarespace服务器上的文件之前对其进行预编译。

在这方面投入了更多的时间，我在发布代码时发现代码存在很多问题。在旧版本的LESS中，变量会“泄漏”到父作用域，这是所有这些代码工作的唯一原因

---

最终，解决方案是放弃旧的1.3.3版本，为最新版本编写代码，重写整个代码，不依赖于这种“泄漏”。然后使用在线编译器进行预编译，直到Squarespace某天更新其编译器。目前，我只需在将其保存到Squarespace服务器上的文件之前对其进行预编译。

在这方面投入了更多的时间，我在发布代码时发现代码存在很多问题。在旧版本的LESS中，变量会“泄漏”到父作用域，这是所有这些代码工作的唯一原因

---

最终，解决方案是放弃旧的1.3.3版本，为最新版本编写代码，重写整个代码，不依赖于这种“泄漏”。然后使用在线编译器进行预编译，直到Squarespace某天更新其编译器。目前，我只需在将其保存到Squarespace服务器上的文件之前对其进行预编译。

在这方面投入了更多的时间，我在发布代码时发现代码存在很多问题。在旧版本的LESS中，变量会“泄漏”到父作用域，这是所有这些代码工作的唯一原因

---

最终，解决方案是放弃旧的1.3.3版本，为最新版本编写代码，重写整个代码，不依赖于这种“泄漏”。然后使用在线编译器进行预编译，直到Squarespace某天更新其编译器。目前，我只需在将其保存到Squarespace服务器上的文件之前对其进行预编译。

在不详细说明错误的具体内容的情况下，我只想指出，我对LESS和Squarespace编译器产生问题的主要原因是，它与LESS不同。Squarespace以前使用了Less.js的节点实现，然后用Java重新构建了编译器，以获得优于Node/Less.js的性能

因此，关键在于Squarespace的LESS编译器是基于LESS.js的，与开发人员使用的LESS编译器不同。您肯定会发现一些奇怪的场景，在这些场景中，事情不会编译相同的内容

---

我会将您发现的任何错误提交给此处的官方回购：。他们的工程师反应很快

在没有详细说明到底哪里出了问题的情况下，我只想指出，我对LESS and Squarespace编译器产生问题的主要原因是因为它与LESS不同。Squarespace以前使用了Less.js的节点实现，然后用Java重新构建了编译器，以获得优于Node/Less.js的性能

因此，关键在于Squarespace的LESS编译器是基于LESS.js的，与开发人员使用的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;
  }
}

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

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