Configuration
Configuring the SASS library is a 4-steps process.
$gridColumnsNumber
Defines the number of column that constitute the grid system. Defaults to 12
.
$breakpoints
List of breakpoints that should be available for built-in classes and query
mixin. Default:
(
xxs: 0px,
xs: 376px,
s: 576px,
m: 768px,
l: 992px,
xl: 1200px,
)
$gaps
List of gaps that should be available for built-in classes. Default:
(
0: 0,
1: 0.25rem,
2: 0.5rem,
3: 1rem,
4: 2rem,
5: 4rem,
6: 8rem,
7: 12rem,
)
$variables
Variables to be generated as CSS variables and available in document. Default:
(
gaps:$gaps,
shp:(
default: 4px,
),
shd: (
1: (
1px 1px 6px hsl(0, 0%, 10%),
0px 1px 5px 0px hsl(0, 0%, 10%),
0px 1px 0px 0px hsl(0, 0%, 10%),
),
2: (
0px 4px 5px -2px hsl(0, 0%, 10%),
0px 7px 10px 1px hsl(0, 0%, 10%),
0px 2px 16px 1px hsl(0, 0%, 10%),
),
3: (
0px 7px 8px -4px hsl(0, 0%, 10%),
0px 13px 19px 2px hsl(0, 0%, 10%),
0px 5px 24px 4px hsl(0, 0%, 10%),
),
4: (
0px 9px 12px -6px hsl(0, 0%, 10%),
0px 19px 29px 2px hsl(0, 0%, 10%),
0px 7px 36px 6px hsl(0, 0%, 10%),
),
5: (
0px 11px 15px -7px hsl(0, 0%, 10%),
0px 24px 38px 3px hsl(0, 0%, 10%),
0px 9px 46px 8px hsl(0, 0%, 10%),
),
),
clr: (
greys-100: hsl(0, 0%, 10%),
greys-200: hsl(0, 0%, 20%),
greys-300: hsl(0, 0%, 27%),
greys-400: hsl(0, 0%, 35%),
greys-500: hsl(0, 0%, 40%),
greys-600: hsl(0, 0%, 60%),
greys-700: hsl(0, 0%, 80%),
greys-800: hsl(0, 0%, 95%),
greys-900: hsl(0, 0%, 99%),
),
ff: (
default: 'sans-serif',
),
)
// The following CSS variables will be generated:
--gaps-1: 4px;
--gaps-2: 8px;
--gaps-3: 16px;
--gaps-4: 24px;
--gaps-5: 32px;
--gaps-6: 64px;
--gaps-7: 94px;
--shp-default: 4px;
--clr-default: #000000;
--clr-default-rgb: rgb(0, 0, 0);
--ff-default: 'sans-serif';