css - 在 Sass @for 循环中使用 css3 媒体查询

Question

这可能吗？

例如:

@for $i from 1 through 12 {
  @media screen and (min-width: #{$i * 240}) { 
    width: {$i * 240 + (20*($i-1)) } ;
  }
}

但我不断得到

Invalid CSS after "...nd (min-width: ": expected expression (e.g. 1px, bold), was "#{$i * 240}) { ..."

Answer 1

您只能在 Sass 3.2 及更高版本的媒体查询中使用变量。您可以通过在终端中运行以下命令找到您正在使用的版本:

gem list | grep sass

您可以通过运行安装 3.2 alpha:

(sudo) gem install sass --pre

我假设您也希望使用像素，所以一旦您安装了 3.2+，您就可以清理您的代码:

@for $i from 1 through 12 {
  @media screen and (min-width: $i * 240px) { 
    width: $i * 240px + (20*($i - 1));
  }
}

注意乘以 240px 而不是 240 和 $i - 1

之间添加的空间