自訂

@規則

A guide to adding custom at-rule tokens and aliases.

Token	CSS text
`all`	`media(all)`
`print`	`media(print)`
`screen`	`media(screen)`
`speech`	`media(speech)`
`landscape`	`media(orientation:landscape)`
`portrait`	`media(orientation:portrait)`
`motion`	`media(prefers-reduced-motion:no-preference)`
`reduce-motion`	`media(prefers-reduced-motion:reduce)`
`base`	`layer(base)`
`preset`	`layer(preset)`
`start`	`starting-style`
`w`	`width`
`h`	`height`

In native CSS, it's not possible to reuse queries through CSS variables. By tokenizing media queries, feature queries, container queries, and applying them with flexible syntax within the markup.

export default {    at: {        landscape: '@media(orientation:landscape)'     }}

Employ concise yet semantically meaningful markup.

<img class="aspect:2/1@landscape" … />

Generated CSS

@layer base, theme, preset, components, general;@layer general {    @media (orientation:landscape) {        .aspect\:2\/1\@landscape {            aspect-ratio: 2/1        }    }}

You wouldn't want to write full condtions within the markup.

<div class="aspect:2/1@media(orientation:landscape)">…</div>

Basic usage

Add a media query token

Create a media query token, such as @landscape, to represent landscape orientation.

export default {    at: {        landscape: '@media(orientation:landscape)'     }}

When displayed in landscape orientation, the image is presented in a 2:1 aspect ratio.

<img class="aspect:2/1@landscape" … />

Generated CSS

@layer base, theme, preset, components, general;@layer general {    @media (orientation:landscape) {        .aspect\:2\/1\@landscape {            aspect-ratio: 2/1        }    }}

Add a feature query token

Create a feature query token, such as @supports-backdrop, to apply styles based on backdrop-filter support.

export default {    at: {        supports: {            backdrop: 'supports(backdrop-filter:blur(0px))'         }    }}

Applies translucent background only when backdrop-filter is supported.

<div class="bg:white/.8@supports-backdrop">…</div>

Generated CSS

@layer base, theme, preset, components, general;@layer general {    @supports (backdrop-filter:blur(0px)) {        .bg\:white\/\.8\@supports-backdrop {            background-color: rgb(255 255 255/.8)        }    }}

Add a feature name alias

Create a feature name alias to shorten the syntax of a feature query.

export default {    at: {        h: 'height'     }}

Use the name alias h:

<div class="hidden@container(h<=200)">…</div>

Generated CSS

@layer base, theme, preset, components, general;@layer general {    @container (height<=12.5rem) {        .hidden\@container\(h\<\=200\) {            display: none        }    }}