Skip to content

Instantly share code, notes, and snippets.

@DaveKin
Last active February 22, 2023 13:05
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save DaveKin/d70b9a8fceb6f252f74d to your computer and use it in GitHub Desktop.
Save DaveKin/d70b9a8fceb6f252f74d to your computer and use it in GitHub Desktop.
Utility SASS mixin to convert a map of property names and values to CSS
/**
* Converts a SASS map of css property names and values into CSS output.
* Properties named `description` will have their value inserted as comments.
*
* Nested maps will be processed recursively.
*
* @param {map} $map the map of properties to output
*/
@mixin map-to-props($map){
@if type-of($map) == map {
@each $prop, $value in $map {
@if type-of($value) != map {
@if inspect($prop) == 'description' {
/* #{inspect($value)} */
}
@else {
#{inspect($prop)}: #{inspect($value)};
}
}
@else {
@include map-to-props($value);
}
}
}
}
@nickensoul
Copy link

Thank you!
Found this a very useful approach in exporting variables to use as a module in webpack.

/* vars.scss */
$someMapObject: (
  prop: value,
  another-prop: anotherValue
);

// next part makes possible to import $someMapObject's variables as es6 module;
:export {
  @include map-to-props($someMapObject);
}

/* app.js */
@import { anotherProp } from 'vars.scss'
console.log(anotherProp) // =>   "anotherValue"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment