💡
ryoppippi的Opinionated UnoCSS Shortcuts その1
最近、私のプロジェクトで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が含まれています。
その一部を共有したいと思います。
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',
};
将来的にさらにshourtcutを追加する予定です。その際には、新しい記事を書きます。
では、次回お会いしましょう！
Discussion