Mairs' variables
Mairs' variables combine the power of Css variables and Sass variables, it means that you can access any of the variables using any of the two forms. For example you can access the accent color either by $color_accent or var(--m-color-accent).
after the setup process you'll have the following Sass variables available to use. Note that all the MComponents use these variables to customize your website.
| property | optional | accessing |
|---|
| main | false | $color_main |
| accent | false | $color_accent |
| onAccent | false | $color_onAccent |
| text | false | $color_text |
| anyName | true | var(--m-color-anyName) |
| property | optional | accessing |
|---|
| gradient1 | true | $gradient_1 |
| gradient2 | true | $gradient_2 |
| gradient3 | true | $gradient_3 |
| property | importance | accessing |
|---|
| en1 | true | $font_en1 |
| en2 | true | $font_en2 |
| ar1 | true | $font_ar1 |
| ar2 | true | $font_ar2 |
| property | importance | accessing |
|---|
| radius | true | $ui_radius |
When it comes to coloring, Mairs also provides you with coloring functions that give you an infinite control of your colors and tones.