What is causing this error when I try to use a Compass variable?

Question

application.css.scss

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

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

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

It works fine if I change application.css.scss to use 28em directly, rather than $var:

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

Why am I not able to use $var?

I'm using

Rails 3.2.11
ruby 1.9.3
compass 0.12.2
compass-rails 1.0.3
sass 3.1.12
sass-rails 3.2.3

Gemfile

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
  gem 'compass-rails'
end

R Milushev R Milushev · Accepted Answer · 2013-01-22T17:10:46

I would advice you to avoid prefixing the manifest file application.css . If you would like to add styles , create a new css.scss file in one of the assets directories and require it in the manifest file . This guide has some valuable rules for dealing with the asset-pipeline.

What is causing this error when I try to use a Compass variable?

1 Answers