CSS Size Variables
Convert useful Sass scale tokens into global CSS variables.
Global Sizes
scss
html {
@include config.tokens--(config.$font-sizes);
@include config.tokens--(config.$spacing-sizes);
@include config.tokens--(config.$theme-sizes);
@include config.tokens--(config.$page-sizes);
--extra: #{math.div(config.size('wide-page') - config.size('page'), 2)};
--main-min: calc(100vw - var(--page-margin) * 2);
--page-columns: [full-start] var(--page-margin) [content-start wide-start
page-start] minmax(var(--main-min), var(--page)) [page-end wide-end
content-end] var(--page-margin) [full-end];
@include config.above('wide-page') {
--main-min: var(--min-page);
--page-columns: [full-start] var(--page-margin) [content-start]
minmax(0, 1fr) [wide-start] minmax(0, var(--extra)) [page-start]
minmax(var(--main-min), var(--page)) [page-end] minmax(0, var(--extra))
[wide-end] minmax(0, 1fr) [content-end] var(--page-margin) [full-end];
}
}
Generate variables from Sass maps, using Accoutrement tools.