0

I'm trying to dynamically create a variable, but that doesn't seem to be possible in SCSS:

$res-mat-xs: 0;
$res-mat-sm: 600px;
$res-mat-md: 960px;
$res-mat-lg: 1280px;
$res-mat-xl: 1920px;

@mixin media-min($var) {
    @media only screen and (min-width: $var) { @content; }
}

@mixin media-max($var) {
    @media only screen and (max-width: $var - 1px) { @content; }
}

@mixin media-from-to($var1, $var2) {
    @media only screen and (min-width: $var1) and (max-width: $var2 - 1px) { @content; }
}

$media: 'min', 'max', 'from-to';
$variants: 'very-small', 'small', 'default', 'large', 'very-large';
$breakpoints: 'xs', 'sm', 'md', 'lg', 'xl';

@each $breakpoint in $breakpoints {
    .typo-style-#{$breakpoint}-#{$variants}-#{$breakpoint} {
        @include media-min($res-mat-#{$breakpoint}) {
            @include typo-style('default', 'important');
        }
    }
}

In addition, I am totally overwhelmed with the from-to ($media) and variants.

The class names for the from-to should look like this:

.typo-style-very-small-from-sm-to-md
.typo-style-large-from-sm-to-lg

How can I make these dynamic variables?

Nick is tired
  • 6,860
  • 20
  • 39
  • 51
Budi
  • 678
  • 2
  • 6
  • 27
  • This post can help: https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass – Amir Naeem Nov 23 '21 at 11:53
  • Does this answer your question? [Creating or referencing variables dynamically in Sass](https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass) – Arkellys Nov 24 '21 at 06:22

0 Answers0