Why is this Compass @import not working in Rails?

0
votes

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;

When I try to visit a page (in development), this Rails error occurs:

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)

Why is $breakpoint-medium-additional-width not being set correctly?

I'm using

  • Rails 3.2.11
  • ruby 1.9.3
  • compass 0.12.2
  • compass-rails 1.0.3
1
ruby-on-railsruby-on-rails-3compass-sass
You have a typo in additional, but that isn't the problem. Also, the import is working, otherwise you'd get an error about the file not being able to be imported. - sevenseacat
@sevenseacat Fixed the typo, thanks. - ben

1 Answers

1
votes

I think you have a typo in your code. I created a new rails project, and it works fine for me.

app/assets/stylesheets/_variables.scss 

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

app/assets/stylesheets/application.scss

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

The output application.css

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