Concepts
Extend modules
This section is about how to extend existing Superkube modules in SCSS.
How it works #
In most cases, there is no need to extend the Superkube modules in SCSS.
It is enough to change or extend the module settings in $type
, $scales
, $variants
, and $colors
.
Superkube will automatically generate the necessary changes and modifiers.
But sometimes you may want a simple way to extend a module's styles, just by specifying them in your SCSS.
For example, our task is to make the Alert module have a monospace font.
This can be achieved by changing $variants
, see Variants for details.
Alternatively, you can do this by adding alert.scss
to the modules of your project.
// your project
superkube/
modules/
alert.scss
modules.scss
main.scss
Next, import alert.scss
in your custom framework modules in the modules.scss
file.
// modules.scss
@import "modules/alert";
Now in alert.scss
override the module styles, for example, like this:
// alert.scss
.alert {
font-family: $font-monospace;
}
After Superkube build, all .alert
modules will have a monospace font.