dialog(settings) 📖
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}
With dialog(settings)
; ; .#{$module-name}
Installation 💾
npm install dialog-settings
Basic usage ☝️
-
Import
dialog-settings.scss
;PS: make sure to add
node_modules
to your import paths -
Setup your module by setting a name-space and calling the setting mixin
;; -
Call the
setting()
function..#{$module-name} -
By setting the global variable
$module-cssvariables
the variable are rendered asCSS
variables.
License 👮🏼
Created with ♥ by meodai. Licensed under the MIT License.