This library provides a simple, consistent interface for getting and setting configuration objects across a Sass project.
This repo is designed to be consumed as a Bower component. To use it, run this command:
bower install -D https://github.com/rafegoldberg/sass-map-deep-set.git#master
Wahoo! Now the ui.sass.utils
repo lives in your project's bower_comoponents
directory.
Once you've got the repo installed, the next step is to include the main partial in your Sass project:
@import 'ui.sass.util/import';
Since you want to be able to access the config in your other partials, you'll probably want to @import
the utils near the top of your Sass structure.
Note: figuring out the relative path to your Bower components can be a bit trickier than the above example suggests. But since it really depends on the build tools and Sass workflow you've chosen, I'll leave it to you to figure out.
Once you've imported the utils in to your project you're ready to get started! Beyond the helper functions in lib/
, these utils also provide an interface (aka a couple of functions) to help manage a Sass project config object. At the moment the functionality is limited to get and set methods; more to come.
To add an object to your config, use the Ui-add()
function as follows;
$ui-conf-variable-ref: Ui-add(name,(
prop: #F00,
deep: (
nested: (
key: "hi, I'm deeply nested!",
alt: "hey, me too!"
))
));
Note: You might've noticed that we're assigning the return value of the
Ui-add()
call to variable. This is because Sass only permits function calls from the right-hand side of an assignment statement. Though the variable will be identical to the passed map, you should always use theUi()
method– rather than the refrence variable –to access config values.
To get a config object or a sub-value, use the Ui()
function:
.example {
conf-obj: Ui(name); //=get a config object
deep-val: Ui(name,deep,nested,key); //=or pass keys to get deep conf vals
}
Here's a real-world example of using the Ui()
and Ui-add()
methods to set up the modular-scale sass plugin:
//-file-> ./sass/core/_scale.scss
$ds-scale: Ui-add(scale,(
base: 1em,
ratio: (1.5,1.25)
));
//-file-> ./sass/libs/_modular_scale.scss
@import 'modular-scale/stylesheets/modular-scale';
$ms-base: Ui(scale,base);
$ms-ratio: Ui(scale,ratio);
- rename this repository to
ui.sass.utils