UIkit hook mixin 考察 (2)

UIkit3

使用環境

Name	Version
Dart Sass	1.70.0
UIkit	3.17.11

前書き

前回の続きで、今回はSass Variablesです。

現状は、uikit/src/scss/variables.scssに、各コンポーネントのSass Variablesを集約しています。

uikit/src/scss/components/variables.scssの一部も、uikit/src/scss/variables.scssに集約しています。

@importから@useや@forwardに置き換えた場合、どうすればいいのか考えました。

準備

scssディレクトリ配下に、下記のディレクトリとファイルを作ります。

種類		説明
File	main.scss
Directory	uikit	オリジナル用
File	uikit/variables.scss
Directory	uikit/components
File	uikit/components/_index.scss
File	uikit/components/alert.scss
Directory	theme	カスタムテーマ用
File	theme/variables..scss

uikit/variables.scss

uikit/src/scss/variables.scssをコピーしてください。

本題

カスタムテーマ用のvariables.scssで、オリジナルのvariables.scssをforwardして、withで変数を再定義します。

theme/variables.scss

@forward '../uikit/variables.scss' with (
  $global-color: #999    // オリジナルは、#666
);

uikit/components/alert.scss

@use '../../theme/variables.scss' as *;

.uk-accordion-title:hover {
    color: $accordion-title-hover-color;
}

結果

生成されたCSSは、下記の通り。

.uk-accordion-title:hover {
  color: #999;
}

後書き

Sass variablesは、従来どおり再定義する場合を想定して、withを使う方法で、試しました。

それ以外に、試していないけど、 CSS custom properties (CSS 変数) を使う方法もあるのかな？と思います。

CSS custom properties

グローバルな変数をCSS custom propertiesにすると、Sassのdarkenやcolor.scaleが使われていると、エラーになります。

roundやmixのように置き換えたとしても、容易ではなく、たぶん置き換えられない場合もあるかも？