Grouping Selectors inside of a loop using Sass

8
votes

The Issue

I'm currently in a pickle. I need to group selectors inside of a Sass loop. I've tried many different ways to go about doing this such as:

body {
    $store: null;
    @for $i from 1 through 10 {
        $store: append($store, ".offset-by-#{$i}", comma);
    }
    // produces content: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
    @each $j in $store {
        $store: unquote($j);
    }
    // produces .offset-by-10
}

What I'm trying to accomplish using pure Sass (no Ruby) is the following:

.offset-by-1,
.offset-by-2,
.offset-by-3,
...
.offset-by-10 { foo: bar; }

If you are a Sass god then please give me an idea of what to do here. If this is an inherent limitation of the meta-language then let me know about that too!

Considerations

I can't use anything other than a mixin to accomplish this because functions are expected to be used on a property value. Mixins, on the other hand allow the production of entire blocks of code.

3
loopssass

3 Answers

16
votes

Keep it simple, soldier!

%foo {
  foo: bar; }

@for $i from 1 through 10 {
  .offset-by-#{$i} {
    @extend %foo; }}

UPD You can also have individual styles with this approach:

%foo {
  foo: bar; }

@for $i from 1 through 10 {
  .offset-by-#{$i} {
    @extend %foo;
    margin-left: 50px * $i; }}

Which results in the following CSS:

.offset-by-1, .offset-by-2, .offset-by-3, .offset-by-4, .offset-by-5, .offset-by-6, .offset-by-7, .offset-by-8, .offset-by-9, .offset-by-10 {
  foo: bar; }

.offset-by-1 {
  margin-left: 50px; }

.offset-by-2 {
  margin-left: 100px; }

.offset-by-3 {
  margin-left: 150px; }

.offset-by-4 {
  margin-left: 200px; }

.offset-by-5 {
  margin-left: 250px; }

.offset-by-6 {
  margin-left: 300px; }

.offset-by-7 {
  margin-left: 350px; }

.offset-by-8 {
  margin-left: 400px; }

.offset-by-9 {
  margin-left: 450px; }

.offset-by-10 {
  margin-left: 500px; }
10
votes

Have you tried something like this:

@mixin createNumbered($num, $className){
    @for $i from 1 through $num {
        .#{$className}-#{$i} {
            @content;
        }
    }
}

@include createNumbered(10, 'foo-bar'){
    color: white;
}

Updated:

@mixin createNumbered($num, $className){
    $foo : '';
    @for $i from 1 through $num {
        $foo : $foo + '.' + $className + '-' + $i + ', ';
    }
    #{$foo} {
        @content;
    }
}

@include createNumbered(10, 'foo-bar'){
    color: white;
}
0
votes

This is likely overkill for what you need, but I needed to be able to add :last-child onto the class list. I built this on Clark Pan's Answer:

@mixin group-classes($start, $stop, $step, $selector, $selector-suffix, $property, $value) {

  $selector-list: '';

  $i: $start;

  @while $i <= $stop {

    $comma: ', ';

    @if $i == $stop {
      $comma: '';
    }

    $selector-list: $selector-list + $selector + '-' + $i + $selector-suffix + $comma;

    $i: $i + $step;

  }

  #{$selector-list} {
    #{$property}: #{$value}
  }

}

And then to use it:

@include group-classes(1, 3, 1, '.e > .g', ':last-child', 'margin', 0);

Result:

.e > .g-1:first-child,
.e > .g-2:first-child,
.e > .g-3:first-child {
    margin:0!important;
}