ruby-on-rails - 为什么这个 Compass @import 在 Rails 中不起作用？

Question

test_app/app/assets/stylesheets/application.css.scss

@import 'compass';
@import 'variables';
@media only screen and (min-width: $breakpoint-medium-additional-width) {
  @import 'partials/medium-additional';
}

test_app/app/assets/stylesheets/_variables.scss

$breakpoint-medium-additional-width: 28em;

当我尝试访问一个页面（正在开发中）时，会发生此 Rails 错误：

Sass::SyntaxError at /
Invalid CSS after "...nd (min-width: ": expected expression (e.g. 1px, bold), was "$breakpoint-med..." (in /Users/ben/rails_projects/test_app/app/assets/stylesheets/application.css.scss)

为什么$breakpoint-medium-additional-width没有正确设置？

我正在使用

• 导轨 3.2.11
• 红宝石 1.9.3
• 指南针 0.12.2
• 指南针导轨 1.0.3

Answer 1

我认为您的代码中有错字。我创建了一个新的 rails 项目，它对我来说很好用。

应用程序/资产/样式表/_variables.scss

$breakpoint-medium-additonal-width: 28em;

应用程序/资产/样式表/application.scss

@import 'compass';
@import 'variables';
@media only screen and (min-width: $breakpoint-medium-additonal-width) {
  font-size: 120%;
}

输出 application.css

@media only screen and (min-width: 28em) {
  font-size: 120%;
}