Skip to content

Instantly share code, notes, and snippets.

@evanre
Created May 31, 2018 11:40
Show Gist options
  • Save evanre/3599e0d17ba51733c9e283f969741e09 to your computer and use it in GitHub Desktop.
Save evanre/3599e0d17ba51733c9e283f969741e09 to your computer and use it in GitHub Desktop.
Sass add configuration objects to extend default params for mixins
// Configuration objects / Extend default mixin params with custom ones
// @src: https://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/
// Default var for overriding
$params: () !default;
// @param {map} $obj - object with default params
// @param {map} $ext-obj - object params to extend the default
@function extend($obj, $ext-obj) {
@return map-merge($obj, $ext-obj);
}
// Shorthand alias for map-get
// @param {string} $key - needed key in map
// @param {map} $map - given params map
@function get($key, $map: $params) {
@return map-get($map, $key);
}
// Create a mixin with empty params map
@mixin exmaple($params: ()) {
// extend defaults with given map in params
$params: extend((
fz: 4,
color: red
), $params) !global;
font-size: #{get(fz)}em;
color: get(color);
}
.test1 {
@include exmaple();
}
// =>
// .test1 {
// font-size: 4em;
// color: red;
// }
.test2 {
@include exmaple((color: green));
}
// =>
// .test2 {
// font-size: 4em;
// color: green;
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment