Rails Sass 媒体查询变量导致 Heroku 推送失败 [关闭]答案

【问题标题】：Rails Sass media query variables cause Heroku push to fail [closed]Rails Sass 媒体查询变量导致 Heroku 推送失败 [关闭]
【发布时间】：2016-03-05 12:47:45
【问题描述】：

我正在使用 Sass 指令/变量来定义我的媒体查询的屏幕大小。但是，我的应用在推送到 Heroku 时无法编译。

来自 Heroku 构建日志的错误。

rake 中止！ Sass::SyntaxError: Invalid CSS after "...ia (max-width: ": expected expression (e.g. 1px, bold), was "@screen-xs-max) {" /tmp/build_79af979930797464252714c06ee51080/bizdesc-com-bizdesc-276487d/app/assets/stylesheets/page.scss:2 /tmp/build_79af979930797464252714c06ee51080/bizdesc-com-bizdesc-276487d/app/assets/stylesheets/application.scss:5

第五行是我的 SCSS 文件中的这一行：@media (max-width: @screen-xs-max) { ... }

我的 page.scss 文件

/* Extra small devices (phones, less than 768px) */   
@media (max-width: @screen-xs-max) { ... }

/* Small devices (tablets, 768px and upto desktops, 992px) */   
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

/* Medium devices (desktops, 992px and upto large desktops, 1200px) */   
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

/* Large devices (large desktops, 1200px and up) */   
@media (min-width: @screen-lg-min) { ... }

【问题讨论】：

由于印刷错误，我投票关闭（提示：这不是您引用变量的方式）。
@cimmamon 我认为回答这个问题会更有用，说一个应该引用变量。
@MaxWilliams 回答这个问题对未来的用户毫无用处，这就是为什么我们会关闭由印刷错误引起的问题。
@cimmanon 写了 6 次@ 而不是$，就像发帖人在这里所做的那样，表示理解上的错误而不是印刷错误：否-one 犯了六次相同的错字。回答他们的问题可以纠正这个错误，将来其他人可能会犯同样的错误。我同意，问题通常看起来很简单，以至于没有任何价值，但我认为这里是否是这种情况值得商榷。
所以，这里的问题是将 LESS 与 SASS 混合，所以在 SASS 中，我需要将 @ 更改为 $，并首先在某处定义变量。

标签： ruby-on-rails heroku sass

【解决方案1】：

使用$ 而不是@ 引用您的变量

@media (max-width: $screen-xs-max)

http://sass-lang.com/guide#topic-2

【讨论】：

@bir_ham 解决了你的问题吗？
是的。我将 LESS 与 SASS 混合，所以在 SASS 中我需要将 @ 更改为 $ 并首先在某处定义变量。