CODEWITHSUNDEEP
sass
yaserso
yaserso

Reputation: 2868

How to create loop for opposite or reverse classes in Sass?

Have two different classes and they have values that are opposite to one another. Is there a way to write them in Sass through an optimized way?

For example:

.left-column{
    float: left;
    margin: 20px;
    padding-right: 20px;
    transform: rotateY(30deg);
}
.right-column{
    float: right;
    margin: 20px;
    padding-left: 20px;
    transform: rotateY(-30deg);
}

These two classes are quite similar, except for some of the values being either reversed (right/left) and one negative while the other positive. I wish to be able to change their values more easily through one medium and have it change relatively for both when generating for the CSS (say I change the rotation to 45, from 30, and it would change to 45 and -45 respectively).

Currently I have this setup:

@each $direction, $distinctions in (
left: (left, right, 30),
right: (right, left, 30)
) {
    $_float: nth($distinctions, 1);
    $_padding: nth($distinctions, 2);
    $_transformation: nth($distinctions, 3);

    .#{$direction}-column {
        float: #{$_float};
        margin: 20px;
        padding-#{$_padding}: 20px;
        transform: rotateY(30deg * #{$_transformation});

        border-color: darken($primary-color, $min-difference-amount) $_border-color-right darken($primary-color, $min-difference-amount) $_border-color-left;
        #{$_ribbon-position}: -30px;
    }
}

I don't even mind creating a new mixin or function seeing as this scenario will probably repeat itself a lot.

Upvotes: 1

Views: 570

Answers (1)

Ruslan
Ruslan

Reputation: 1303

If we consider only 2 "directions", the solution could be easier.

@mixin mirror($side1) {
  $side2: right;
  $k1: 1;
  @if $side1 == right {
    $side2: left;
    $k1: -1;
  }
  $k2: $k1 * -1;

  float: $side1;
  margin: 20px * $k1;
  padding-#{$side2}: 20px;
  transform: rotateY(30deg * $k2);
}

.left-column {
  @include mirror(left);
}
.right-column {
  @include mirror(right);
}

Here we have 2 opposite coefficients and 2 opposite "sides". The SCSS above is compiled to: 

.left-column {
  float: left;
  margin: 20px;
  padding-right: 20px;
  transform: rotateY(-30deg);
}

.right-column {
  float: right;
  margin: -20px;
  padding-left: 20px;
  transform: rotateY(30deg);
}

Upvotes: 2

Related Questions