自訂
函數
A guide to adding custom functions and aliases.
Overview
| Token | Unit | CSS text |
|---|---|---|
translate() | rem | translate() |
translateX() | rem | translateX() |
translateY() | rem | translateY() |
translateZ() | rem | translateZ() |
translate3d() | rem | translate3d() |
perspective() | rem | perspective() |
skew() | deg | skew() |
skewX() | deg | skewX() |
skewY() | deg | skewY() |
skewZ() | deg | skewZ() |
skew3d() | deg | skew3d() |
rotate() | deg | rotate() |
rotateX() | deg | rotateX() |
rotateY() | deg | rotateY() |
rotateZ() | deg | rotateZ() |
rotate3d() | deg | rotate3d() |
blur() | rem | blur() |
drop-shadow() | rem | drop-shadow() |
hue-rotate() | deg | hue-rotate() |
rgb() | - | rgb() |
rgba() | - | rgba() |
hsl() | - | hsl() |
hsla() | - | hsla() |
color() | - | color() |
color-contrast() | - | color-contrast() |
color-mix() | - | color-mix() |
hwb() | - | hwb() |
lab() | - | lab() |
lch() | - | lch() |
oklab() | - | oklab() |
oklch() | - | oklch() |
light-dark() | - | light-dark() |
clamp() | - | clamp() |
repeat() | - | repeat() |
linear-gradient() | - | linear-gradient() |
radial-gradient() | - | radial-gradient() |
conic-gradient() | - | conic-gradient() |
repeating-linear-gradient() | - | repeating-linear-gradient() |
repeating-radial-gradient() | - | repeating-radial-gradient() |
repeating-conic-gradient() | - | repeating-conic-gradient() |
matrix() | - | matrix() |
matrix3d() | - | matrix3d() |
scale() | - | scale() |
scale3d() | - | scale3d() |
scaleX() | - | scaleX() |
scaleY() | - | scaleY() |
scaleZ() | - | scaleZ() |
$() | - | $() |
calc() | - | calc() |
Master CSS functions allow you to define aliases for native CSS functions while also enabling unit conversion. For example, you can replace translate(2rem) with a simplified translate(32), assuming a default unit conversion (e.g., px), streamlining your styling logic.
Additionally, the functions simplify your template syntax. Instead of writing verbose CSS variables like var(--name), you can use the shorthand $name, making your markup cleaner and more expressive.
Basic usage
Add a function
Add a function to config.functions to define a custom function.
export default { functions: { translate: { unit: 'rem' } }}Apply your custom functions:
<div class="translate(32)">…</div><div class="translate(2rem)">…</div>$<name>
Use the $<name> default function to apply CSS variables (or Master CSS variables).
<div class="fg:$foo"><div class="fg:$(foo)"><div class="fg:var(--foo)">