Quick examples

Special props and values#

Add any child CSS/pseudo definition.

Live Editor

ccss({
    color: '#fff',
    child: {
        '> h1 span': {
            color: '#fc0'
        }
    }
})

ccss({
    color: '#fff',
    child: {
        '> h1 span': {
            color: '#fc0'
        }
    }
})

Result

color: #fff;
> h1 span {
  color: #fc0;
}

Pseudo definitions are also having shorthands, always starting with :.

Live Editor

ccss({
    c: '#fff',
    ':h': {
        c: '#000'
    }
})

ccss({
    c: '#fff',
    ':h': {
        c: '#000'
    }
})

Result

color: #fff;
&:hover {
  color: #000;
}

Use it to pass raw CSS string / Style object.

Live Editor

ccss({
    raw: `background-color: #fff;`
})

ccss({
    raw: `background-color: #fff;`
})

Result

background-color: #fff;

Properties awaiting numeric values with a unit can accept pure numbers for built-in automatic conversion.

If not a number is given, the value will be used as-is.

Example:

Live Editor

ccss({
    width: 100,
    height: '100px'
})

ccss({
    width: 100,
    height: '100px'
})

Result

width: 100px;
height: 100px;

Shorthand properties awaiting numeric values with units can accept an array as an input.

Example:

Live Editor

ccss({
    margin: [1, 0, 1, 1]
})

ccss({
    margin: [1, 0, 1, 1]
})

Result

margin: 5px 0 5px 5px;