Concepts
Scales
Scales are map of SCSS variables for generating modules and their modifiers.
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-space: (...),
button: (...),
input: (...),
breakpoint: (...),
sidebar: (...),
container: (...),
edge: (...),
level: (...),
radius: (...),
border: (...),
icon: (...),
width: (...),
spacing: (...),
shadow: (...),
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: (
16: 16px,
24: 24px,
32: 32px,
48: 48px,
64: 64px,
128: 128px
)
After extending, a new value will be added and the scale will look like this:
image: (
16: 16px,
24: 24px,
32: 32px,
48: 48px,
64: 64px,
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 when using the Rounded module with the r-base modifier, the element will get a 5px rounded corner instead of the default 4px.
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 }
}