Inconsistent Output between LESS Compilers

Question

I have written some LESS code that resizes text based on browser width. Multiple different elements and their parameters can be sent to the reusable mixin.

All online LESS compilers output the desired result. But I am getting different output from Squarespace's LESS compiler.

Squarespace's compiler appears to "hang on" to the old variable values when called a second time.

Can you see how Squarespace's LESS compiler is reaching its output and, if so, share changes that can be made to make the output consistent with all other compilers?

Output from online compilers: (desired)

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

Output from Squarespace compiler: (undesirable)

@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 Source Code and 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;
}

Note that Squarespace uses LESS 1.3.3 so you'll need to manually switch Less2Css to that version (though it doesn't seem to change anything if you don't).

score 2 · Accepted Answer · answered Oct 08 '15 at 13:27

Having put much more time into this, I've discovered there are a lot of issues with the code as I posted it. In older versions of LESS, variables would "leak" up to parent scopes, which is the only reason any of this code was working at all.

In the end, the solution was to abandon the old 1.3.3 version and write for the latest version, rewriting the entire code NOT to depend on such "leaks". Then to precompile using an online compiler until Squarespace updates their compiler someday. For now, I just have to precompile it before saving it to the file that is on the Squarespace Server.

score 1 · Answer 2 · answered Jul 02 '16 at 16:03

Without getting in the specifics of exactly what went wrong, I'll just mention that the top reason I've had issues with LESS and Squarespace's compiler is because it's not the same as LESS. Squarespace previously used a Node implementation of Less.js, and then rebuilt the compiler in Java to gain performance over Node/Less.js.

So the key takeaway is that Squarespace's LESS compiler is based off of Less.js and not identical to the same LESS compilers a developer would use. You'll definitely find odd scenarios where things won't compile the same.

I would submit any bugs you find to the official repo here: https://github.com/Squarespace/less-compiler. Their engineers are pretty responsive!

Inconsistent Output between LESS Compilers

2 Answers2