Question

hello fellow webdevelopers,
I’m a newbie to SASS, developing with Intellij IDEA Ultimate. I copied the font-awesome.scss file from the fontawesome/sass directory to my project and I got a few errors from the IDE, mainly at constructs like this:

.btn, .nav-tabs {
  [class^="icon-"], 
  [class*=" icon-"] {
    /* keeps button heights with and without icons the same */
    line-height: .9em;
  }
}

it keeps nagging about the colon , as separator between [class^="icon-"] and [class*=" icon-"].

but if the section looks like this

a [class^="icon-"],
a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}

everything looks fine.

furthermore, in the generated font-awesome.css file, there are some obvious errors as text-decoration: inherit; is definitely no valid CSS value. Could it be that these are bugs, or am I getting something wrong here?

how should I change the syntax at the above shown scss file to prevent the errors?

I’d like to use the font-awesome.scss as I’m also planning to use SASS for the whole project and it would be cool if I could use fontawesome the same way.

any suggestions on this?

Answer 1

The sample code provided is valid Sass and compiles as it should. Your IDE is just missing the proper syntax highlighting for Sass.