css - Sass变量取决于媒体查询

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

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

最佳答案

这是您的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;
}

关于css - Sass变量取决于媒体查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29845377/