0

In short, I'd like to process a file through Sass, but then through Velocity later.

I need Sass spit out something like the following after compilation:

.btn-$right {
  a: b;
}

However, the most logical attempt I made results in a compilation error:

.btn-#{"$start"} {
  font-size: 12px
}

The error:

Error: Invalid CSS after ".btn-": expected selector, was "$start"
    on line 1 of style.scss
jmatz
  • 57
  • 2
  • 4
    `.btn-$right` isn't legal in CSS. See [Which characters are valid in CSS class names/selectors?](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) – André Dion Oct 26 '17 at 21:50
  • After Sass process my file, velocity will process it as well, and it will turn .btn-$right into either .bnt-right or .btn-left depending on the value of the $right variable, as assigned in a velocity macro call. – jmatz Oct 27 '17 at 23:52
  • The SASS compiler will not allow you to output invalid CSS, aside from [a few exceptions](https://github.com/sass/sass/blob/stable/test/sass/engine_test.rb#L863-L883). – André Dion Oct 28 '17 at 10:59

0 Answers0