QuickStart: Scale
Sass size & scale management tools:
- Gather all your sizes into a single map
- Generate new sizes based on [modular scales][core-ratio.html] or arbitrary functions
- Convert between relative units
- Access sizes on the fly
Import
If you already imported accoutrement/sass/tools
you are ready to go.
If you want to import individual plugins,
make sure you first import the shared core:
@import '<path-to>/accoutrement/sass/core';
@import '<path-to>/accoutrement/sass/plugin/scale';
If you’re using Eyeglass, you can leave off most of the path:
@import 'accoutrement/core';
@import 'accoutrement/plugin/scale';
Sizes & Ratios
Establish your palette of ratios (modular scales) and sizes:
$ratios: (
'my-ratio': 1.25,
);
$sizes: (
// define explicit values
'root': 24px,
'icons': 1em,
'page': 8in,
// reference existing sizes
'text': '#root'
// apply adjustments and conversions
// using named-ratios or arbitrary functions
'rhythm': '#root' ('_fifth': 1, 'convert-units': 'rem'),
'h1': '#root' ('my-ratio': 3),
'h2': '#root' ('my-ratio': 2),
'h3': '#root' ('my-ratio': 1),
// define calc() output based on existing sizes
'viewport-relative': 'calc(%s + %s)' ('%s': '#root' 2vw),
);
Access your named sizes using the size()
function,
and even convert-units on-the-fly:
.example {
font-size('text');
width: size('page', 'px');
}
Import
If you already imported accoutrement/sass/tools
you are ready to go.
If you want to import individual plugins,
make sure you first import the shared core:
@import '<path-to>/accoutrement/sass/core';
@import '<path-to>/accoutrement/sass/plugin/type';
If you’re using Eyeglass, you can leave off most of the path:
@import 'accoutrement/core';
@import 'accoutrement/plugin/type';