CODEWITHSUNDEEP
csssass
Bas
Bas

Reputation: 2210

SCSS / Sass: How do i change a mixin to output specific CSS?

I've got a function written in SCSS / Sass which loops every item of a map with the @each function.

  $classes-map: ("class-a": "doesntmatter",
          "class-b": "doesntmatter",
          'class-c': 'doesntmatter');

  @mixin function {
      @each $class, $property in $classes-map {
        %#{$class} {
          content: $property;
        }
        @for $i from 1 to 4 {
          &.#{$class}-#{$i} {
            @extend %#{$class};
          }
        }
      }
    }

On every item of the map is also a @for loop, to make a list of classes with komma's and everytime a different number.

Here's what the output should be:

.class-a-1, .class-a-2, .class-a-3 {
  content: "doesntmatter";
}

.class-b-1, .class-b-2, .class-b-3 {
  content: "doesntmatter";
}

.class-c-1, .class-c-2, .class-c-3 {
  content: "doesntmatter";
}

I'm calling this function by using this piece of code:

.parent {
  &.child {
      @include function;
  }
}

CSS

.parent.child .parent.child.class-a-1, .parent.child .parent.child.class-a-2, .parent.child .parent.child.class-a-3 {
  content: "doesntmatter";
}
.parent.child .parent.child.class-b-1, .parent.child .parent.child.class-b-2, .parent.child .parent.child.class-b-3 {
  content: "doesntmatter";
}
.parent.child .parent.child.class-c-1, .parent.child .parent.child.class-c-2, .parent.child .parent.child.class-c-3 {
  content: "doesntmatter";
}

Desired CSS

.parent.child.class-a-1, .parent.child.class-a-2, .parent.child.class-a-3 {
   content: "doesntmatter";
}
.parent.child.class-b-1, .parent.child.class-b-2, .parent.child.class-b-3 {
   content: "doesntmatter";
}
.parent.child.class-c-1, .parent.child.class-c-2, .parent.child.class-c-3 {
   content: "doesntmatter";
}

How do i change the @mixin function to resolve this problem?

Upvotes: 2

Views: 230

Answers (1)

mikedidthis
mikedidthis

Reputation: 4897

What the &!

Oh so close! As you want to chain / include the parent selector using &, then anything in the mixin should follow suit. The missing piece was the placeholder &%#{$class}.

SCSS:

$classes-map: ("class-a": "doesntmatter",
        "class-b": "doesntmatter",
        'class-c': 'doesntmatter');

@mixin function {
  @each $class, $property in $classes-map {
    &%#{$class} {
      content: $property;
    }
    @for $i from 1 to 4 {
      &.#{$class}-#{$i} {
        @extend %#{$class};
      }
    }
  }
}

.parent {
  &.child {
    @include function;
  }
}

CSS:

.parent.child.class-a-1, .parent.child.class-a-2, .parent.child.class-a-3 {
  content: "doesntmatter";
}
.parent.child.class-b-1, .parent.child.class-b-2, .parent.child.class-b-3 {
  content: "doesntmatter";
}
.parent.child.class-c-1, .parent.child.class-c-2, .parent.child.class-c-3 {
  content: "doesntmatter";
}

Upvotes: 3

Related Questions