Scales

Overview #

The $scales map is in vars/scales.scss and contains various scales for generating modules and their modifiers. Usually the scales are related to size values: font, width, spacing.

Note: See also Spacing and Typography for a separate and detailed look at these two scales.

By default, $scales contains several predefined groups and values. Here is a list of all value groups:

// =Scales
$scales: (
    type: (...),
    type-sm: (...),
    type-md: (...),
    type-lg: (...),
    type-scale: (...),
    breakpoint: (...),
    sidebar: (...),
    grid: (...),
    container: (...),
    edge: (...),
    level: (...),
    radius: (...),
    divider: (...),
    divider-length: (...),
    border: (...),
    icon: (...),
    iconbox: (...),
    sizing: (...),
    spacing: (...),
    image: (...)
);

Extend #

To extend the default values or replace existing values with your own, you need to create your scales.scss and then extend $scales map in it.

Put scales.scss in the SCSS variables of your project. See also How to use to learn more about how to create your project and extend Superkube.

// your project
superkube/
vars/
    scales.scss
vars.scss
main.scss

Next, import scales.scss in your custom framework settings in the vars.scss file.

// vars.scss
@import "vars/scales";

Now you can extend $scales in the scales.scss file with map-extend function.

// =Scales
$scales: map-extend($scales, (
    image: (
        256: 256px
    )
));

The default image scale has these values:

image: (
   32: 32px,
   48: 48px,
   64: 64px,
   96: 96px,
   128: 128px
)

After extending, a new value will be added and the scale will look like this:

image: (
   32: 32px,
   48: 48px,
   64: 64px,
   96: 96px,
   128: 128px,
   256: 256px
)

This means that in addition to the default size modifiers, a new modifier image-256 will be generated for the Image module, which will set the width and height of the image to 256px.

Change #

Changing the default values works on the same principle. You extend $scales by specifying a new value and it changes when Superkube is built.

// =Scales
$scales: map-extend($scales, (
    radius: (
        base: 5px
    )
));

The default base radius value is 4px. The example above changes it to 5px. Now, the element will get a 5px rounded corner instead of the default 4px, using the Radius utility with the radius-base modifier.

Get #

Getting and generating modifiers and values from scales is already built into Superkube. But if you need to use scales to build your modules or styles, you can get the value from $scales using Functions.

You can get the value using the scale function.

.item {
    width: scale(container, medium);
}

You can also use this function to get a map of the entire group of values. And go through all the values with the loop.

$radius: scale(radius);
@each $name, $value in $radius {
    .item-radius-#{$name} { border-radius: $value }
}