0

ブラウザーの幅に基づいてテキストのサイズを変更する LESS コードをいくつか作成しました。複数の異なる要素とそのパラメーターを再利用可能な mixin に送信できます。

すべてのオンライン LESS コンパイラは、目的の結果を出力します。しかし、Squarespace の LESS コンパイラからは異なる出力が得られます。

Squarespace のコンパイラは、2 回目に呼び出されたときに古い変数値に「ハングアップ」しているように見えます。

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 Server 上のファイルに保存する前にプリコンパイルする必要があります。

于 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 に答える