1
$base-space: 1rem !default;

$space-map : (
    '1o9': $base-space,
    '1o8': $base-space/8,
    '1o4': $base-space/4,
    '1o2': $base-space/2,
) !default;

@mixin containers($new-space-map) {

    @each $name, $value in $new-space-map {

        .container--#{$name}{
            margin: $value 0;
        }
    }
}

@include containers($space-map);

This outputs 4 CSS classes.

I am trying to generate all 4 classes or only one class based on the name I pass as argument.

my output needs to be:

.container--1o9 {
  margin: 1rem 0;
}

.container--1o8 {
  margin: 0.125rem 0;
}

.container--1o4 {
  margin: 0.25rem 0;
}

.container--1o2 {
  margin: 0.5rem 0;
}

Or

.container--1o2 {
  margin: 0.5rem 0;
}

based on the argument I pass.

To explain further; I am trying trying to use @include on same SASS Map in both the ways mentioned below depending on my need:

@include containers(<SASS map file>); //This I achieved

or

@include containers(<any key from SASS Map>); //This I cant

I am stuck here and not sure if this is achievable or not. Any help will be very much appreciated.

user2359466
  • 17
  • 2
  • 8
  • Try removing !default. I did it in Sassmeister and it worked as you expect – Brad Apr 26 '18 at 15:04
  • @Brad, what should I do if I want to output one single class. I tried `@include containers($1o9)` and it is not working. I am trying to use `@include` on same SASS Map in both the ways stated below depending on my need: `@include containers();` or `@include containers();` Can you please send me the Sassmeister link if you have that handy. – user2359466 Apr 26 '18 at 16:21
  • Your mixin is outputting 4 classes. Just use the class you want to use. All 4 of these classes are in your CSS compiled file – Brad Apr 26 '18 at 16:26
  • @Brad, got it. I had different line of thought which is not achievable with current code. Thanks for clearing my thoughts. – user2359466 Apr 26 '18 at 16:37

1 Answers1

0

Remove the !Default. This will work as you expect it to

Link to sassmeister

https://www.sassmeister.com/gist/2839eaf64bd441e73a92aed6bb980465

Remember all 4 classes are being compiled into your CSS file. Just use the one you want

Brad
  • 1,685
  • 1
  • 27
  • 38