CODEWITHSUNDEEP
cssruby-on-railsrubysass
Ionică Bizău
Ionică Bizău

Reputation: 113495

Sass Rails doesn't support map syntax (object variables)

I'm getting the following error when trying to use Sass Maps (which look like object variables):

Invalid CSS after "  primary": expected ")", was ": #3097D1,"
  (in /Users/.../app/assets/stylesheets/new_design.scss:19)

I reproduced the error by using the following minimal example:

$theme-colors: (
  primary: #3097D1,
  secondary: black
);

@each $key, $val in $theme-colors {
  .foo.#{$key} {
    color: $val;
  }
}

Expected:

.foo.primary {
  color: #3097D1;
}

.foo.secondary {
  color: black;
}

But getting the error mentioned.

sass-rails, ~> 5.0.0 seems to be installed according to the Gemfile:

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

I'd assume that loads one of the latest sass versions which should support object variables.

I have the feeling the current version I have is not recognizing this syntax.

How can I make sure I have the right sass version? Is there anything else I have to do to compile this syntax successfully?

bundle show sass-rails shows 5.0.6, which seems recent.

Upvotes: 2

Views: 388

Answers (1)

fabOnReact
fabOnReact

Reputation: 5942

as discussed in the comments there is a stackoverflow discussion about a similar issue with the map sass syntax

The discussion refers to Github Issue 1088

I quote

There's a number of issues with the indented syntax, and Sass maintainers aren't going to fix them. :( They say, the .sass parser is weird and hard to refactor.

I find Sass syntax to be quicker to type and easier to read. It is deprived of the visual noise:

indented_vs_bracketed

It's also much easier to do copy-pasting.

So Sass maintainers, PLEASE don't let the indented syntax fall behind!

Probably by digging down in the discussion we will be able to find the solution. Now I am quoting the solution from the owner of the post Ionică Bizău:

wrapping the values between quotes, saving, reloading in browser without any errors, and then removing the quotes back and reloading the page in browser solved the problem. Maybe it was something cached somewhere... but I can't understand where. I didn't restart rake or ran any bundle command... Thanks! :)

Upvotes: 1

Related Questions