Custom Syntax


Customizing variables for your design tokens.

🚧This page is still under construction and some content may not be complete.


import { variables } from '@master/css'
export default {
variables: {
'font-family': {
sans: 'Inter'
screen: { desktop: 1280 },
spacing: { sm: 10 },
primary: '

Apply custom variables using ambiguous shorthand:

<div class="font:sans max-w:screen-desktop m:sm bg:primary"></div>

Master CSS provides useful variable groups for various inheritance behaviors such as colors, spacing, fonts, and box sizes by default. You can start implementing your design tokens from these topics.

This guide primarily explains the functionality of variables.

Basic usage

Add a variable

Add rule-specific variables

Add a variable alias

Group variables

Custom Syntax

Customizing abstract styles for your design system.

Production Optimization
Preventing flash of unstyled content

Improve the page loading experience and ensure seamless rendering of content.

© Aoyue Design LLC.