CODEWITHSUNDEEP
csssass
Fergoso
Fergoso

Reputation: 1582

sass variables depending on media queries

Is it possible to assign variables based on media queries?

@mixin akuru($podi){
    $smallText: $podi;
}

$ress: (320px, 480px, 768px);
$smText: (0.85em, 0.85em, 0.85em);

$lngt: length($ress);
@for $i from 1 through $lngt {
    @media only screen and (min-width: nth($ress, $i) ) {
        @include akuru(#{($smText, $i)});
    };
};

Upvotes: 2

Views: 196

Answers (1)

Colin Bacon
Colin Bacon

Reputation: 15609

Here is your SASS code working correctly.

@mixin akuru($podi){
  font-size: $podi;
}

$ress: (320px, 480px, 768px);
$smText: (0.85em, 0.95em, 1.85em);

$lngt: length($ress);
@for $i from 1 through $lngt {
  @media only screen and (min-width: nth($ress, $i) ) {
      @include akuru(#{nth($smText, $i)});
  };
};

Outputs

@media only screen and (min-width: 320px) {
  font-size: 0.85em;
}
@media only screen and (min-width: 480px) {
  font-size: 0.95em;
}
@media only screen and (min-width: 768px) {
  font-size: 1.85em;
}

Upvotes: 1

Related Questions