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

它说它现在可以in this article

这是一个错误 -

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

我的宝石文件 -

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

Sass-gem宝石v 3.2.3背后的sass宝石？还是我错过了一些明显的东西？

Answer 1

回答我自己的问题 -

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

sass (3.1.20)
sass-rails (3.2.5)

之后，我只是运行'bundle update sass'，将sass更新为正确的版本。

媒体查询中的变量现在按预期工作。

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

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

3 个答案: