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

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

Все онлайн-компиляторы LESS выдают желаемый результат. Но я получаю другой вывод от LESS компилятора Squarespace.

Компилятор Squarespace, кажется, "зависает" от старых значений переменных при вызове во второй раз.

Можете ли вы увидеть, как LESS-компилятор 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: 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 на эту версию (хотя, похоже, это ничего не изменит, если вы этого не сделаете).

Источник

2 ответа

Решение

Потратив гораздо больше времени на это, я обнаружил, что во время публикации кода возникло много проблем. В более старых версиях LESS переменные "просачивались" до родительских областей, что является единственной причиной, по которой этот код работал вообще.

В конце концов, решение состояло в том, чтобы отказаться от старой версии 1.3.3 и написать для последней версии, переписав весь код, чтобы НЕ зависеть от таких "утечек". Затем прекомпилировать с помощью онлайн-компилятора, пока Squarespace не обновит их когда-нибудь. Сейчас мне просто нужно предварительно скомпилировать его перед сохранением в файл на сервере Squarespace.

Источник

Не вдаваясь в подробности того, что именно пошло не так, я просто упомяну, что главная причина, по которой у меня возникли проблемы с LESS и компилятором Squarespace, заключается в том, что он отличается от LESS. Ранее Squarespace использовал Node-реализацию Less.js, а затем перекомпилировал компилятор в Java, чтобы повысить производительность по сравнению с Node / Less.js.

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

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

Источник
Другие вопросы по тегам