sass变量取决于媒体查询

Question

是否可以根据媒体查询分配变量？

@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)});
    };
};

Answer 1

这是您的SASS代码正常运行。

@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)});
  };
};

<强>输出

@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;
}