Question

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

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

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

您能看到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中，变量会“泄漏”到父作用域，这是任何此代码完全正常工作的唯一原因。

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

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编译器之间的输出不一致

2 个答案: