@navBarHeight のような Less 変数をテーマ化できますか?

The Art of Thematization in Less

アプリを開発する場合、顧客の検証を目指して頻繁に視覚的な変更を行うことは避けられません。顧客へのプレゼンテーションを迅速に行うには、特定のページの美学 (テーマ) を維持することが望ましいです。

1 つのアプローチには、body 要素に適用される外観クラスを作成して、迅速なページ変換を可能にすることが含まれます。ここで疑問が生じます: @navBarHeight などの Less 変数をテーマ化できますか?

Less でカスタマイズ可能なテーマ

これが実現できるかどうかは、スタイルと変数のバリエーションの程度によって異なります。テーマの間。シンプルな開始点:

@themes: (
    blue   rgb( 41, 128, 185),
    marine rgb( 22, 160, 133),
    green  rgb( 39, 174,  96),
    orange rgb(211,  84,   0),
    red    rgb(192,  57,  43),
    purple rgb(142,  68, 173)
);

#navBar {
    .themed(background-color);
}

.themed(@property) {
    .for(@themes); .-each(@theme) {
        @name:  extract(@theme, 1);
        @color: extract(@theme, 2);

        .theme-@{name} & {
            @{property}: @color;
        }
    }
}

基本を超えて: 強化されたカスタマイズ

パターン マッチングやルールセット引数などのテクニックを採用することで、複雑なテーマ階層の自動生成が可能になります。次の例を考えてみましょう:

#navBar {
    .themed({
        color:            @fore-color;
        background-color: @back-color;
    });
}

.theme(@name: green) {
    @fore-color: green;
    @back-color: spin(@fore-color, 180);
    .apply();
}

.theme(@name: blue) {
    @fore-color: blue;
    @back-color: (#fff - @fore-color);
    .apply();
}

.theme(@name: black-and-white) {
    @fore-color: black;
    @back-color: white;
    .apply();
}

これにより、特定の設計要件に合わせて調整された、適応性の高いテーマ システムが可能になります。 Less を使用すると、柔軟なテーマ化の可能性が無限に広がります。

以上が@navBarHeight のような Less 変数をテーマ化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。