CODEWITHSUNDEEP
csssass
As above so below
As above so below

Reputation: 809

Generating flexbox classes using SASS

So far I've managed to write the classes and modifiers for justify-content as so :

.flex {
display: flex;

$positions: (
    start: flex-start,
    end: flex-end,
    center: center,
    around: space-around,
    between: space-between
    );

@each $mod, $dir in $positions {
    &--just-#{$mod} {
        justify-content: $dir;
    }
}

}

which works great, but now I'm trying to do the same for align-items without having to repeat the @each statement.

So I thought I could make a mixin:

    $positions: (
    start: flex-start,
    end: flex-end,
    center: center,
    around: space-around,
    between: space-between
    );

@mixin just-align($name, $prop) {
    @each $mod, $dir in $positions {
        &--#{$name}-#{$mod} {
            $prop: $dir;
        }
    }
}

@include just-align(just, justify-content);

And include it twice, once for the justify-content and once for the align-items, but it doesnt seem to work.

Is this something that cannot be done with SASS or am I just doing something wrong ?

Upvotes: 0

Views: 1596

Answers (1)

Robert Wade
Robert Wade

Reputation: 5003

You're really close, the code sample wasn't complete, but if I get what you're trying to accomplish its this. Looks like you had $prop and $dir when it should have been #{$prop} and #{$dir} in your @each loop

Basically you have to use string interpolation on those variables (What does hash (#) sign do outside loops in SASS?).

Functioning example:

https://www.sassmeister.com/gist/459480125193d418702c9c64996bf89d

However...

The available properties for justify-content and align-items are actually different, so I wouldn't take this approach. Rather use two array variables and pass each to the mixin to get the proper output.

.flex {
  display: flex;

  $justify-positions: (
      start: flex-start,
      end: flex-end,
      center: center,
      around: space-around,
      between: space-between,
      evenly: space-evenly
  );
    $align-positions: (
      start: flex-start,
      end: flex-end,
      center: center,
      stretch: stretch,
      baseline: baseline
  );

  @mixin just-align($name,$prop,$arr) {
      @each $mod, $dir in $arr {
          &--#{$name}-#{$mod} {
              #{$prop}: #{$dir};
          }
      }
  }

  @include just-align('align','align-items', $align-positions);
  @include just-align('justify','justify-content', $justify-positions);
}

Will compile as:

.flex {
  display: flex;
}
.flex--align-start {
  align-items: flex-start;
}
.flex--align-end {
  align-items: flex-end;
}
.flex--align-center {
  align-items: center;
}
.flex--align-stretch {
  align-items: stretch;
}
.flex--align-baseline {
  align-items: baseline;
}
.flex--justify-start {
  justify-content: flex-start;
}
.flex--justify-end {
  justify-content: flex-end;
}
.flex--justify-center {
  justify-content: center;
}
.flex--justify-around {
  justify-content: space-around;
}
.flex--justify-between {
  justify-content: space-between;
}
.flex--justify-evenly {
  justify-content: space-evenly;
}

Upvotes: 2

Related Questions