Syntax

‹

Math operations

Creating proportional elements or making a color lightly brighter can get really laborious. Math helps you to create powerful combos for properties and colors.

Here are some examples:


.selector {
    padding: [5px * 2];
    color: [#ccc * 2];
    // lets assume $color is '#FFF555'
    background-color: [$color - #222 + #101010];
}



.selector {
    padding: 10px;
    color: #ffffff;
    background-color: #ede343;
}

You can perform the basic calculating operation and use brackets.


.selector {
    padding: [(5px - 3) * (5px - 3)];
}



.selector {
    padding: 4px;
}

The measuring unit can be set after the math bracket ] or the highest measuring unit count that was found inside of the math brackets will be set. Default measuring unit is px


.selector {
    padding: [5px - 3em + 5px]cm;
    margin: [20 - 10] [30% - 10];
}



.selector {
    padding: 7cm;
    margin: 10px 20%;
}

Hex colors always win the measuring unit battle.

Found an error on this page? Please help to correct it!