UIkitのスタイルを変更し、Sassを使って独自のテーマを作成する方法を学びましょう。
ソースコードを含むUIkitをインストールすると、UIkitのSassバージョンが/src/scssフォルダ内にあります。Sassバージョンを使用すると、多くのCSSルールを手動で上書きするのではなく、ビルドプロセスでカスタマイズを含めることができます。
注記 Sassは、SassとSCSSの2つの異なる構文バージョンをサポートしています。UIkitはSCSS構文を使用しています。
プロジェクトのビルドワークフローにUIkitを含めるには、UIkitから3つのSCSSファイルを正しい順序で独自のSCSSコードにインポートする必要があります。その後、ファイルをコンパイルします（例：sass site.scss > site.cssを実行するか、その他のSassコンパイラを使用します）。次の例で説明されているように、正しい順序を維持するよう注意してください。
// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;
// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";
// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }
// 4. Import UIkit.
@import "uikit/src/scss/uikit-theme.scss";注記 この例では、含まれているデフォルトテーマのスタイルを使用しています。代わりに、variables.scss、mixins.scss、uikit.scssをインポートして、コアスタイルのみを含めることもできます。
独自のSCSSコードを配置するファイルを設定したら、UIkitを思い通りにテーマ化することができます。SCSSを初めて使用する場合は、言語機能を確認してください。UIkitのSCSSソースを使用する際には、いくつかの推奨事項があります。
既に宣言されている変数の値を上書きするだけで、多くのカスタマイズが可能です。フレームワークのSCSSファイルまたはvariables.scssファイル内に、各コンポーネントのすべての変数があり、テーマ内でそれらを上書きできます。
最初に、UIkitソース内で変更したいSCSS変数を見つけます。たとえば、グローバルなリンクの色は/src/scss/components/variables.scssで定義されています。
// default value
$global-link-color: #4091D2;次に、上記のようにsite.scssなど、独自のファイル内でカスタム値を設定してデフォルトを上書きします。
// new value
$global-link-color: #DA7D02;コンパイルされたCSSには、カスタム値が設定されます。しかし、グローバルなリンクの色が変更されただけでなく、多くのコンポーネントは@global-*変数を使用して独自の色を推論し、わずかに調整します。このようにして、いくつかのグローバル変数を変更するだけで、迅速にテーマを作成できます。
オーバーヘッドセレクタを防ぐために、SassのMixinを使用します。これは、UIkitソースの定義済みセレクタにフックし、追加のプロパティを挿入します。セレクタをすべてのドキュメントで繰り返す必要がなくなり、グローバルな変更をはるかに簡単に実行できます。
最初に、コンポーネントのSCSSファイル（たとえば、カードコンポーネントの場合は/src/scss/components/card.scss）を参照して、拡張したいルールを見つけます。
// SCSS rule
.uk-card {
position: relative;
box-sizing: border-box;
// mixin to allow adding new declaration
@include hook-card();
}次に、上記のようにsite.scssなど、独自のSCSSファイル内でフックを使用して追加のCSSを挿入します。
// mixin to add new declaration
@mixin hook-card() { color: #000; }逆フックを使用すると、.uk-lightまたは.uk-dark修飾子と組み合わせて使用されるコンポーネントのスタイルをカスタマイズできます（詳細については、Inverseコンポーネントを参照）。これらのフックは、SassバージョンとLessバージョンでは少し異なる方法で処理されます。Sassバージョンでは、各コンポーネントに独自の逆フックがあります。src/scss/mixins.scssファイルを確認すると、使用可能なすべてのフックを確認できます。
たとえば、デフォルトのボタンを、逆バージョンとして使用されるたびにカスタム背景で表示するようにできます。
@mixin hook-inverse-button-default(){
background: lime;
}変数とフックのどちらも使用できない場合は、独自のセレクタを作成することもできます。たとえば、カードコンポーネントのhook-card-misc()ミキシンを使用して、内部にセレクタを作成します。これにより、新しいセレクタがコンパイルされたCSSファイルの適切な場所にソートされます。上記のように、独自のSCSSファイル（たとえば、site.scss）に次の行を追加します。
// misc mixin
@mixin hook-card-misc() {
// new rule
.uk-card a { color: #f00; }
}Inverseコンポーネントには、柔軟な逆動作を実装するための追加のスタイルが含まれています。プロジェクトでこれらのスタイルを使用しない場合は、Sassをコンパイルする際に除外できます。これにより、コンパイルされたCSSのファイルサイズを小さくできます。そのためには、color-modeを含むSass変数（例：$inverse-global-color-mode）を探し、noneに設定します。
逆スタイルを完全に無効にするには、次のように設定します。
$inverse-global-color-mode: none;特定のコンポーネントの逆モードを無効にすることもできます。
// Card
$card-primary-color-mode: none;
$card-secondary-color-mode: none;
// Navbar
$navbar-color-mode: none;
// Off-canvas
$offcanvas-bar-color-mode: none;
// Overlay
$overlay-primary-color-mode: none;
// Section
$section-primary-color-mode: none;
$section-secondary-color-mode: none;
// Tile
$tile-primary-color-mode: none;
$tile-secondary-color-mode: none;上記の例では、すべてのカスタムルールをsite.scssに直接追加しました。いくつかの変数を変更するだけで、残りの部分に満足している場合は、これで問題ありません。ただし、大規模なカスタマイズを行う場合は、このファイルを入力ポイントとしてSassコンパイラに使用するだけにすることをお勧めします。すべてのルールを、サブフォルダ内のコンポーネントごとに1つのファイルに整理する必要があります。これは、デフォルトテーマ/src/scss/themeで見つけることができるのと同じ構造です。
<!-- uikit sources, might be in a subfolder when using npm -->
uikit/src/scss/
components/
_import.scss
accordion.scss
alert.scss
…
theme/
_import.scss
accordion.scss
alert.scss
…
<!-- other uikit files, some of which we will import below -->
…
<!-- in here, we now put all your customizations, divided by component -->
theme/
<!-- create 2 files for each component you customize -->
accordion.scss <!-- overwrite variables in here -->
accordion-mixins.scss <!-- use hooks in here -->
alert.scss
alert-mixins.scss
align.scss
align-mixins.scss
<!-- etc for all components you customize -->
…
<!-- this is your entry point to compile scss -->
site.scss
Sassコンパイラのエントリポイントはsite.scssです。ここでは、次の順序ですべてのソースファイルをコンパイルします。
// site.scss
// 1. Your custom variables and variable overwrites.
@import "theme/accordion.scss";
@import "theme/alert.scss";
@import "theme/align.scss";
// … import all
// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables.scss";
@import "uikit/src/scss/mixins.scss";
// 3. Your custom mixin overwrites.
@import "theme/accordion-mixins.scss";
@import "theme/alert-mixins.scss";
@import "theme/align-mixins.scss";
// … import all
// 4. Import UIkit
@import "uikit/src/scss/uikit.scss";これでsite.scssをコンパイルでき、結果のCSSにすべてのカスタマイズが含まれます。
注記 「4.」の部分をUIkitソースからの単一のインポートステートメントに置き換えることで、この設定をさらに拡張できます。使用しないコンポーネントを省略して、より小さいCSSを作成できます。src/scss/components/_import.scssからコピーし、正しいインポート順序を維持してください。