Less

Lessを使用してUIkitのスタイルを変更し、独自のテーマを作成する方法を学習します。

Lessソースを使用してUIkitをインストールしたら、コンパイルして独自のテーマを追加できます。Lessは、UIkitスタイルの記述に使用されている言語です。これにより、多くのCSSルールを手動で上書きするのではなく、ビルドプロセスにカスタマイズを含めることができます。

ビルド方法

Lessソースファイルを使用すると、UIkitをカスタマイズできます。カスタマイズされたバージョンをウェブサイトで使用するには、LessソースをCSSにコンパイルする必要があります。基本的には、独自のビルドプロセスを設定するか、UIkitに含まれるビルドスクリプトを使用する、2つのアプローチがあります。

独自のビルドプロセスを使用する

プロジェクトのビルドワークフローにUIkitを含めるには、コアUIkitスタイル（`uikit.less`）またはデフォルトテーマを含むUIkit（`uikit.theme.less`）をプロジェクト独自のLessファイルにインポートする必要があります。その後、このメインのLessファイルを好きな方法でコンパイルする必要があります。Lessのコンパイル方法が不明な場合は、公式Lessドキュメントを参照してください。

// Import UIkit default theme (or uikit.less with only core styles)
@import "node_modules/uikit/src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

含まれるビルドプロセスを使用する

UIkitのスタイルを変更する場合は、そのビルドプロセスを使用して、異なるテーマのCSSバージョンを作成し、プロジェクトに含めることができます。そのため、独自のビルドプロセスを設定する必要はありません。

独自のLessテーマをビルドプロセスに含めるには、` /custom`ディレクトリを作成します。このディレクトリには、すべてのカスタムテーマが含まれます。

注記 ` /custom`フォルダは`.gitignore`にリストされており、カスタムファイルがUIkitリポジトリにプッシュされるのを防ぎます。` /custom`ディレクトリを独自のGitリポジトリにすることもできます。このようにすると、テーマファイルはUIkitファイルに干渉することなく、バージョン管理下に置かれます。

` /custom/my-theme.less`（またはその他の名前）というファイルを作成し、コアUIkitスタイル（`uikit.less`）またはデフォルトテーマを含むUIkit（`uikit.theme.less`）をインポートします。

// Import UIkit default theme (or uikit.less with only core styles)
@import "../src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

UIkitとカスタムテーマをCSSにコンパイルするには、pnpmタスク`compile`を実行します。

# Run once to install all dependencies
pnpm install

# Compile all source files including your theme
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch

生成されたCSSファイルは、` /dist/css`フォルダに配置されます。

注記 カスタムテーマはテストファイルでも使用できます。ブラウザで` /tests`ディレクトリのインデックスに移動し、ドロップダウンメニューからテーマを選択してください。

UIkitテーマの作成

独自のLessコードを入力するファイルを設定したら、UIkitを目的のテーマでテーマ化できます。以前にLessを使用したことがない場合は、言語機能を確認してください。UIkit Lessソースを操作する際には、いくつかの推奨事項があります。

変数を使用する

すでに宣言されている変数の値を上書きするだけで、多くのカスタマイズが可能です。各コンポーネントのすべての変数は、フレームワークのLessファイル内にあり、テーマで上書きできます。

最初に、UIkitソース内で変更したいLess変数を見つけます。たとえば、グローバルなリンクの色は` /src/less/components/variables.less`で定義されています。

// default value
@global-link-color: #4091D2;

次に、独自のファイル（例：` /custom/my-theme.less`）内でカスタム値を設定してデフォルトを上書きします。

// new value
@global-link-color: #DA7D02;

コンパイルされたCSSには、カスタム値が設定されます。しかし、グローバルなリンクの色が変更されただけではありません。多くのコンポーネントは、`@global-*`変数を使用して独自の色を推測し、わずかに調整します。このようにして、いくつかのグローバル変数を変更するだけで、テーマを迅速に作成できます。

フックを使用する

オーバーヘッドセレクタを回避するために、LessのMixinを使用します。これは、UIkitソースから定義済みのセレクタにフックし、追加のプロパティを適用します。セレクタをすべてのドキュメント全体で繰り返す必要はなく、グローバルな変更をはるかに簡単に実行できます。

最初に、コンポーネントのLessファイル（例：カードコンポーネントの場合は` /src/less/components/card.less`）を参照して、拡張したいルールを見つけます。

// CSS rule
.uk-card {
    position: relative;
    box-sizing: border-box;

    // mixin to allow adding new declarations
    .hook-card();
}

次に、独自のLessファイル（例：` /custom/my-theme.less`）内でフックを使用して追加のCSSを挿入します。

// mixin to add new declaration
.hook-card() { color: #000; }

その他のフック

変数もフックも使用できない場合は、独自のセレクタを作成することもできます。そのためには、`_hook-card-misc_`フックを使用し、その中にセレクタを記述します。これにより、新しいセレクタはコンパイルされたCSSファイルの適切な場所にソートされます。次の行を独自のLessファイル（例：` /custom/my-theme.less`）に追加します。

// misc mixin
.hook-card-misc() {

    // new rule
    .uk-card a { color: #f00; }
}

反転コンポーネントを無効にする

反転コンポーネントは、対応する背景色に対してすべてのコンポーネントの色付けを行うCSSを生成します。プロジェクトでコンテンツの色を反転する必要がない場合は、Lessをコンパイルする際に無効にできます。これにより、コンパイルされたCSSのファイルサイズが小さくなります。そのためには、`color-mode`を含むLess変数（例：`@card-primary-color-mode`）を探し、`none`に設定します。

反転スタイルを完全に無効にするには、次のように設定します。

@inverse-global-color-mode: none;

特定のコンポーネントの反転モードを無効にすることもできます。すべてのコンポーネントの完全なリストを以下に示します。

// Card
@card-default-color-mode: none;
@card-primary-color-mode: none;
@card-secondary-color-mode: none;

// Dropbar
@dropbar-color-mode: none;

// Dropdown
@dropdown-color-mode: none;

// Navbar
@navbar-color-mode: none;
@navbar-dropdown-color-mode: none;

// Off-canvas
@offcanvas-bar-color-mode: none;

// Overlay
@overlay-default-color-mode: none;
@overlay-primary-color-mode: none;

// Section
@section-default-color-mode: none;
@section-muted-color-mode: none;
@section-primary-color-mode: none;
@section-secondary-color-mode: none;

// Tile
@tile-default-color-mode: none;
@tile-muted-color-mode: none;
@tile-primary-color-mode: none;
@tile-secondary-color-mode: none;

テーマの構造化方法

上記の例では、すべてのカスタムルールを` /custom/my-theme.less`に直接追加しました。いくつかの変数を変更するだけで、残りの部分に満足している場合は、これで問題ありません。ただし、大規模なカスタマイズを行う場合は、このファイルを入力ポイントとしてLessコンパイラを使用することをお勧めします。すべてのルールをサブフォルダ内のコンポーネントごとに1つのファイルに分類する必要があります。これは、デフォルトテーマ` /src/less/uikit.theme.less`で見つけることができるのと同じ構造です。

注記 この例では、完全なUIkitプロジェクトの` /custom`ディレクトリにテーマを作成していると想定しています。独自のビルドプロセスを設定している場合は、これらのパスを調整できます。

custom/

    <!-- entry file for Less compiler -->
    my-theme.less

    <!-- folder with single Less files -->
    my-theme/

        <!-- imports all components in this folder -->
        _import.less

        <!-- one file per customized component -->
        accordion.less
        alert.less
        …

Lessコンパイラのエントリポイント、` /custom/my-theme.less`

// Core
@import "../../src/less/uikit.less";

// Theme
@import "my-theme/_import.less";

テーマフォルダには、すべての単一コンポーネントのカスタマイズをインポートする1つのファイルがあります。`custom/my-theme/_import.less`

@import "accordion.less";
@import "alert.less";
// …

注記 この設定を使用すると、使用しないコンポーネントのインポートステートメントを削除できます。これにより、CSSが小さくなります。src/less/components/_import.lessにリストされているとおりに、正しいインポート順序を維持してください。