dialog(settings) :book:
A simple key value store for module settings, to make modules more portable.
With the nice side-effect that all settings can be rendered as native CSS variables. Play with the demo.
Why ⁉️️
- Easy way to switch between rendered values and CSS variables.
- Better portabily: Only have to rename one string, not tons of variable names as well, when renaming/moving a module.
- Warn when variables are missing instead of failing the build. Allows to mock the CSS for a module withought knowing the values for each property.
Before
$module-name: 'mymodule';
$mymodule-background: $colors-dark;
$mymodule-color: $colors-contrast;
$mymodule-margin: 2rem;
.#{$module-name} {
color: $mymodule-color;
background: $mymodule-background;
margin: $mymodule-margin;
}
With dialog(settings)
$module-name: 'mymodule';
@include settings((
color: $colors-dark,
background: $colors-contrast,
margin: 2rem
));
.#{$module-name} {
color: setting(color);
background: setting(background);
margin: setting(margin);
}
Installation 💾
npm install dialog-settings
Basic usage ☝️
-
Import dialog-settings.scss
@import 'dialog-settings/dist/dialog-settings';
PS: make sure to add node_modules
to your import paths
-
Setup your module by setting a name-space and calling the setting mixin
$module-name: 'somerandommodule';
@include settings((
gutter : 1rem,
color : silver,
color-contrast : gold
));
-
Call the setting()
function.
.#{$module-name} {
padding: setting('gutter');
&__submodule {
color: setting(color);
}
}
-
By setting the global variable $module-cssvariables
the variable are rendered as CSS
variables.
License 👮🏼
Created with ♥ by meodai. Licensed under the MIT License.