ruby-on-rails - 媒体查询中的 sass 变量 - sass-rails-3.2.3

Question

我正在尝试在媒体查询中使用变量-

$break-small: 320px;
$break-large: 1200px;

.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: $break-small) {
    width: 100px;
    float: none;
  }
  @media screen and (min-width: $break-large) {
    float: right;
  }
}

它说现在可以在这篇文章中

它抛出一个错误 -

Invalid CSS after "...nd (max-width: ": expected expression (e.g. 1px, bold), was "$break-small)

我的宝石文件 -

gem 'sass-rails',   '~> 3.2.3'

sass-rails gem v 3.2.3 在 sass gem 后面吗？还是我错过了一些明显的东西？

Answer 1

回答我自己的问题-

我查看了我的 Gemfile.lock，其中包含以下内容 -

sass (3.1.20)
sass-rails (3.2.5)

After that I simply ran 'bundle update sass' which updated sass to the correct version.

Variables in media queries now working as expected.

Answer 2

我刚刚在一个新的 Rails 项目中尝试了这种完全相同的风格，使用的宝石与您使用的相同，它就像一个魅力。所以我的猜测是你正在使用'sass'文件的扩展名，你应该使用'scss'.

两者之间的语法不兼容，因此只需将文件名从（例如）'mystyle.css.sass'更改为'mystyle.css.scss'

Answer 3

试试这个：

@mixin breakpoint($point) {
  @if $point == break-small {
    @media only screen and (max-width: 320px) { @content; }
  }
  @else if $point == break-large {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

并像这样引用：

.profile-pic {
  float: left;
  width: 250px;
  @include breakpoint(break-small) {
    width: 100px;
    float: none;
  }
  @include breakpoint(break-large) {
    float: right;
  }
}