今天繼續介紹 UnoCSS 提供的各種 Preset

Preset-attributify

Preset-attributify 可以用 attribute 的方式來撰寫 class name，有些人會覺得使用 tailwind 這種方式撰寫 class 會變得一大串不利閱讀，透過這個 preset 就可以把相同類型的 class name 集中撰寫，是一個相當方便的功能。

• 原始 class

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

• 改用 attribute 分類

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

符號 ~

像是 flex, grid, border 這些樣式名稱本身可以作為 attribute 同時也有其 css 屬性功用，在使用 attribute 簡寫時可以用 ~ 符號表示。

• 原始 class

<button class="border border-red">
  Button
</button>

• 改用 attribute 並結合簡寫

<button border="~ red">
  Button
</button>

純屬性模式

如同 WindiCSS 的屬性模式，直接把 class name 寫成屬性，不像上面可以分類，單純寫成 attribute。

<div m-2 rounded text-teal-400 />

衝突解決

使用 attributify 時最容易發生衝突的是 text 屬性，在撰寫元件的時候很常會被拿來當成 prop 傳遞資料，Nuxt 中的 <NuxtLink> 也是使用這個名稱來傳遞連結的名稱，要避免衝突的方式是修改 prefix 的名稱，設定方式如下：

• 修改 config 配置：

// 這段是寫在 unocss 的 presets 陣列裡面
presetAttributify({
  prefix: 'un-',
  prefixedOnly: true, // <--
})

• 完成上面的設定之後，需要加上指定的 prefix 之後 attribute 才會生效，就能避免名稱相同的衝突。

<a un-text="red">Text color to red</a>

or 另一種作法是關閉特定名稱的屬性模式，就不會被掃描出衝突

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})