Несогласованный вывод между компиляторами LESS

Question

Я написал некоторый код LESS, который изменяет размер текста на основе ширины браузера. Множество разных элементов и их параметров можно отправить в многоразовый микс.

Все онлайн-компиляторы 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; 
    } 
} 

МЕНЬШЕ Исходный код и 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, а затем перестроил компилятор на Java, чтобы получить производительность по Node/Less.js.

Таким образом, ключевым выводом является то, что компилятор Squesspace LESS составляет , основанный на Less.js и не идентичный тем же компиляторам LESS, которые разработчик использовал бы. Вы обязательно найдете нечетные сценарии, где вещи не будут компилироваться одинаково.

Я отправил бы любые ошибки, которые вы найдете в официальное репо здесь: https://github.com/Squarespace/less-compiler. Их инженеры очень отзывчивы!