Created
May 31, 2018 11:40
-
-
Save evanre/3599e0d17ba51733c9e283f969741e09 to your computer and use it in GitHub Desktop.
Sass add configuration objects to extend default params for mixins
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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