Qu'est-ce qu'UnoCSS ?

UnoCSS est le moteur CSS atomique instantané, conçu pour être flexible et extensible. Le noyau est non-opinioné et toutes les utilités CSS sont fournies via des presets.

Par exemple, vous pouvez définir vos propres utilités CSS personnalisées, en fournissant des règles dans votre fichier de configuration local.

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

Cela ajoutera une nouvelle utilité CSS m-1 à votre projet. Comme UnoCSS est à la demande, il ne fera rien jusqu'à ce que vous l'utilisiez dans votre base de code. Donc, disons que nous avons un composant comme celui-ci :

html

<div class="m-1">Hello</div>

m-1 sera détecté et le CSS suivant sera généré :

css

.m-1 { margin: 1px; }

Pour le rendre plus flexible, vous pouvez rendre votre règle dynamique en changeant le premier argument de la règle (nous l'appelons matcher) en RegExp, et le corps en fonction, par exemple :

diff

export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }],
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

En faisant cela, maintenant vous pouvez avoir des utilités de marge arbitraires, comme m-1, m-100 ou m-52.43. Et encore une fois, UnoCSS ne les génère que lorsque vous les utilisez.

html

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

Presets

Une fois que vous avez créé quelques règles, vous pouvez les extraire dans un preset et les partager avec d'autres. Par exemple, vous pouvez créer un preset pour le système de design de votre entreprise et le partager avec votre équipe.

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // votre propre preset
  ],
})

De même, nous avons fourni quelques presets officiels pour que vous puissiez commencer à les utiliser immédiatement, et vous pouvez également trouver de nombreux presets communautaires intéressants.

Jouer

Vous pouvez essayer UnoCSS dans votre navigateur, dans le Terrain de Jeu. Ou rechercher des utilités dans les presets par défaut dans la Documentation Interactive.