← Superkube / Documentation 2.1.1

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

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.