API Reference

class-variant

Create reusable, extensible, and customizable style class variants.

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

Overview

import cv from 'class-variant'
const btn = cv(
'inline-flex rounded',
{
intent: {
primary: 'bg:blue fg:white bg:blue-55:hover',
secondary: 'bg:white fg:slate-30 bg:slate-90:hover',
},
size: {
sm: 'text:14 p:5|15',
md: 'text:16 p:10|25'
}
},
['uppercase', { intent: 'primary', size: 'md' }],
({ indent, size }) => indent && size && 'font:semibold'
)
btn.default = {
intent: 'primary',
size: 'sm'
}
export default btn

Apply it:

import btn from './class-variants/btn'
btn()
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:14 p:5|8 font:semibold
btn({ indent: 'secondary', size: 'sm' })
// inline-flex rounded bg:white fg:slate-30 bg:slate-90:hover text:14 p:5|8 font:semibold
btn({ indent: 'primary', size: 'md' })
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:16 p:10|25 uppercase font:semibold

Basic usage

🚧

Syntax
Z Index

Set the z-order of a positioned element.

API Reference
@master/css-cli

Command line interface for Master CSS.

© Aoyue Design LLC.