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.
- 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.
$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;
}
$module-name: 'mymodule';
@include settings((
color: $colors-dark,
background: $colors-contrast,
margin: 2rem
));
.#{$module-name} {
color: setting(color);
background: setting(background);
margin: setting(margin);
}
npm install dialog-settings
-
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 asCSS
variables.
Usage with node-sass-json-importer
It can be usefull to store design settings in a seperate file, to create a nice API with the designer.
Using node-sass-json-importer settings can be stored in a JSON
file.
module-design-specs.json
{
"settings": {
"background-color": "#fff",
"stack": "1rem",
"color": "#212121"
}
}
module.scss
@import 'module-design-specs.json';
@include settings($settings);
.module {
color: setting(color);
background: setting(background-color);
margin-bottom: setting(stack);
}
Created with ♥ by meodai. Licensed under the MIT License.