Skip to content

Instantly share code, notes, and snippets.

@ogbaoghene
Last active August 29, 2015 14:04
Show Gist options
  • Save ogbaoghene/7c51be7f4ddbdb9a1eb0 to your computer and use it in GitHub Desktop.
Save ogbaoghene/7c51be7f4ddbdb9a1eb0 to your computer and use it in GitHub Desktop.
Simulate Sass 3.3 Maps data type when compiling with libsass (v2.0.0), still compiles successfully with Sass 3.3.
// Parameters:
// ```scss
// $map : Map converted to List
// $property : CSS property
// $loop : Loop through list. Predefined as true
// $map-key: Key for desired value in key/value pair. Predefined as null
// $namespace : Prefix for placeholders. Predefined as null
// ```
//
// Usage:
// ```scss
// @include loop-map($type, font-weight, type);
//
// .example2 {
// font-weight: list-map($type, subheading);
// }
// ```
//
// _**Note** : Key/value pairs in Maps are parenthesized and separated by comma to convert them to lists, e.g. $type: ((heading, $bold),(subheading, $normal),(body, $normal),(bold, $bold),);.
$extra-light: 100;
$light: 200;
$demi: 300;
$normal: 400;
$medium: 500;
$semi-bold: 600;
$bold: 700;
$black: 800;
$extra-black: 900;
$type: (
(heading, $bold),
(subheading, $normal),
(body, $normal),
(bold, $bold),
);
@function list-map($map, $map-key) {
@each $val in $map {
$key: nth($val, 1);
$value: nth($val, 2);
@if $map-key == $key {
@return $value;
}
}
}
@mixin loop-map($map, $property, $namespace) {
@each $val in $map {
$key: nth($val, 1);
$value: nth($val, 2);
%#{$namespace}-#{$key} {
#{$property}: $value;
}
}
}
@include loop-map($type, font-weight, type);
.heading {
@extend %type-heading;
}
.subheading {
@extend %type-subheading;
}
.body {
@extend %type-body;
}
.bold {
@extend %type-bold;
}
.extend-heading {
@extend %type-heading;
}
.media-query-subheading {
font-weight: list-map($type, subheading);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment