Concepts and Principles

Dynamic Assignment

Implement styles with more flexibility, using dynamic variables.

Dynamically assign values

Dynamic assignment is applicable to all styles, so you can assign even after fetching data from the server.

<div class="font:teal-70 font:purple-70:hover font:96 font:heavy">Aa</div>

Dynamically assign values with a front-end framework like React, Vue, and Angular.

<div className={`font:teal-${size} font:purple-${size}:hover font:96 font:heavy`}>Aa</div>

Conditionally apply class names

To conditionally manipulate class names, you can use vanilla JS or any technique specific to your framework.

<div class="scaleX(-1) ~transform|.3s font:96 font:heavy font:96 font:heavy">Aa</div>

Conditionally apply class names with a front-end framework like React, Vue, and Angular.

<div className={(flipped ? 'scaleX(-1) ' : '') + '~transform|.3s font:96 font:heavy font:96 font:heavy'}>Aa</div>

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically