0

我已经编写了一些基于浏览器宽度调整文本大小的 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 源代码和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 切换到该版本（尽管如果您不这样做，它似乎没有任何改变）。

4

2 回答 2

2

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

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

于 2015-10-08T13:27:28.667 回答
1

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

因此，关键的一点是 Squarespace 的 LESS 编译器基于Less.js，与开发人员使用的相同 LESS 编译器不同。你肯定会发现一些奇怪的场景，其中的东西编译不一样。

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

于 2016-07-02T16:03:20.153 回答