Variables

Customizing variables for your design tokens.

Overview

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

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