Colors
Sugar provide a nice way map your colors to names in order to use them inside your codebase with ease.
Modifiers
Sugar provide a way to add modifiers to a color. For example, you can have a color named "gray" that has a modifier named "dark". Here's how to register these kind of colors:
@include s-setup((
colors: (
'gray': (
color: #777777,
modifiers: (
dark: #333333
)
)
)
));
Color classes
Sugar provide some classes to apply color inside your html:
.bkg-{color}
: Apply the color to thebackground-color
.bkg-{color}--{modifier}
: Apply the modified color to thebackground-color
.c-{color}
: Apply the color to thecolor
property.c-{color}--{modifier}
: Apply the modified color to thecolor
property