ryoppippi的Opinionated UnoCSS Shortcuts その1

Note

この記事は著者のブログ記事My Opinionated UnoCSS Shortcuts & Rulesを日本語に翻訳したものです。

最近、私のプロジェクトでUnoCSSを使い始めました。そして、とても気に入っています。

私のお気に入りの機能の1つはshortcutsとrulesです。 shortcutsを使うと、複数のclassの組み合わせに対して単一の略語を定義できます。例えば、class="p-4 m-4 bg-gray-100 text-gray-900"と書く代わりに、class="card"と書くことができます。 ruleを使うと、特定の要素に適用されるべきclassのセットを定義できます。これは複雑なruleを作成する際に非常に便利です。

私は@ryoppippi/unocss-presetというライブラリを作成しました。これには私の独自のshourtcutとruleが含まれています。

https://github.com/ryoppippi/unocss-preset

その一部を共有したいと思います。

Warning

短すぎるshourtcutを使用すると、コードの可読性が低下する可能性があるので、独自のshourtcutを作成する際は注意してください。

`flex` shourtcut

以前、items-centerとjustify-centerについて混乱したことがあるかもしれません。 items-centerは垂直方向の配置用で、justify-centerは水平方向の配置用です。

ところで、marginを設定する際、水平方向のmarginにはmx-を、垂直方向のmarginにはmy-を使用できます。そこで、これらの命名規則に基づいてflex用のshourtcutを作成しました。

const shortcuts = {
	fxc: 'flex justify-center',
	fxs: 'flex justify-start',
	fxe: 'flex justify-end',
	fyc: 'flex items-center',
	fys: 'flex items-start',
	fye: 'flex items-end',
	fcc: 'flex items-center justify-center',
};

`grid` shourtcut

grid用のshourtcutも作成しました。

gridとplace-content-centerを使用してコンテンツを中央に配置できます！これは簡単です。さらに、place-items-centerを使用して複数のアイテムを中央に配置することもできます。

const shortcuts = {
	gc: 'grid place-content-center',
	gcc: 'gc place-items-center',
};

https://zenn.dev/tonkotsuboy_com/articles/css-grid-centering

将来的にさらにshourtcutを追加する予定です。その際には、新しい記事を書きます。

では、次回お会いしましょう！

flex shourtcut #

grid shourtcut #

`flex` shourtcut

`grid` shourtcut