Streamline SCSS into a single `@media` or '@each'

Question

I'm trying to build a SASS(SCSS) file which creates my main containers. I'd like to reduce the bloat by using an @each or @mixin to loop through each of the sizes (xl, lg, md, sm, xs) and then either:

• Proportionally reduces the height of the psuedo elements starting from the largest responsive size in xl and going down to xs where that value is reduced to 0 at the smallest responsive size.

Or:

• Increase the value from 0 in the smallest responsive size in xs by 2 each size up, up to the largest responsive size in xl.

The expected result is the same as below (though it would be acceptable for the overlap of sizes to be linear, for example right now the responsive sizes in each container size start and end 2rem smaller than the previous container size)

.container-xl {
  @extend %container;
  &::after,
  &::before {
    height: 14rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 12rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 10rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 8rem;
    }
  }
}
.container-lg {
  @extend %container;
  &::after,
  &::before {
    height: 12rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 10rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 8rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 6rem;
    }
  }
}
.container-md {
  @extend %container;
  &::after,
  &::before {
    height: 10rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 8rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 6rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 4rem;
    }
  }
}
.container-sm {
  @extend %container;
  &::after,
  &::before {
    height: 8rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 6rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 4rem;
    }
  }
  @media (max-width: $sm) {
    &::after,
    &::before {
      height: 2rem;
    }
  }
}
.container-xs {
  @extend %container;
  &::after,
  &::before {
    height: 6rem;
  }
  @media (max-width: $lg) {
    &::after,
    &::before {
      height: 4rem;
    }
  }
  @media (max-width: $md) {
    &::after,
    &::before {
      height: 2rem;
    }
  }
}

user_11672616 · Answer

After a bit of work I've figured out a working concept.

$xl: 1200px;
$lg: 1037px;
$md: 797px;
$sm: 615px;
$xs: 415px;
$query: "max-width:";
$breakpoints: "all" "" "", "(#{$query} #{$xl})" "xl-" "-xl",
  "(#{$query} #{$lg})" "lg-" "-lg", "(#{$query} #{$md})" "md-" "-md",
  "(#{$query} #{$sm})" "sm-" "-sm", "(#{$query} #{$xs})" "xs-" "-xs";


$val: 21;
@each $i in $breakpoints {
  $val: $val - 1;
    .container#{nth($i, 3)} {

        &::after,
        &::before {
          height: #{$val}rem;
        }
        @media (max-width: $lg) {
          &::after,
          &::before {
             height: #{$val - 1}rem;
          }
        }
        @media (max-width: $md) {
          &::after,
          &::before {
               height: #{$val - 2}rem;
          }
        }
        @media (max-width: $sm) {
          &::after,
          &::before {
              height: #{$val - 3}rem;
          }
        }
      }
}

Streamline SCSS into a single `@media` or '@each'

1 Answers