ホームページのデザインに、UIkitとscssを使ってみたら素晴らしいのヒトコト

CSSのフレームワーク、UIkit 素晴らしいです。

• デザインが洗練されている
• デザインしたWebサイトが簡単に作れてしまう
• 学習時間も少なくてすむ。直感的で分かりやすい

ひと昔前に、骨組みをHTML、外観をCSSで行う、と習っていたので、HTMLに大きさの定義やカラー名など具体的に書くことはメンテナンス上良くないと思っていましたが、こういう書き方も良いですね。ブートストラップの流れでしょうか。

もちろん、全ての事を満たしてくれるわけではありませんが、デザインの変更も出来ます

ちょっと使っていたら、ここは用意されているカラー以外を使いたいな、とか出てきます。これはショウガイ。
ですが、UIKitでは初期に用意されているカラーを変更する機能も用意されていました。

SCSSとかLESS

デザインの変更などはscssで(lessでも可能？)で修正することが可能と言うことで導入してみました。

scss + vscode

scssを記述後はcssへ変換、いわゆるコンパイルという作業が出てきますが、VSCodeにはプラグインでコンパイル環境を構築できるので、以下を参考にインストールします。VSCodeがインストールしてあれば、5分も掛からずにSCSSを試せるようになってると思います。

• VSCodeでSASS・SCSSをコンパイルする方法【初心者向き】

ここではLive Sass Compilerというプラグインを導入します。
インストール後は例えば、style.scssというファイルで作ったら、style.cssというcssが作成されていたらOKですね。

UIkit + SCSS

ダウンロードしたUlkitを解凍 -> ulkitにリネーム -> cssフォルダ直下に移動します。

// 1. Your custom variables and variable overwrites.
$global-link-color: #da7d02;
$global-primary-background: rgb(42, 156, 99);

// 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";

サンプルにあるとおりに記述して、コンパイル（scssファイルを保存）すれば変換されたcssが出力されました。

またグローバル変数は以下のファイルにあります。

uikit/src/scss/components/variables.scss

以上になります