Sass variables in media query condition not supported?

Flow
1

I’m noticing that my Sass variables are not being replaced when I use them in media query conditions, like

@media screen and (max-width: $break-small) { ... According to
this article
, this was an issue in Sass 3.1, and has been fixed in 3.2.

So my question is, which version of Sass is being supported by vaadin-sass-compiler 0.9.13 (the most recent I can find), and if that’s the problem, is there a newer version available?

2

Yes, unfortunatelly, the Vaadin Sass compiler does not support Sass 3.x .

3

If you are using Vaadin 8, in theory you could try to change the Sass compiler, here is a proof concept, but that might take some effort.

https://github.com/pleku/vaadin-libsass

4

Is there any roadmap for this? I’ve found
this github project
, but that hasn’t had any commit since late 2015.

Do I have other options, like using a different Sass compiler?

5

I am letting IntelliJ with FileWatchers compile all my sass-files and having the compiled css-files checked in to my repo as well. That way I can choose whatever sass-compiler I want. Maybe an option?

6

Check out https://github.com/pleku/vaadin-libsass - a project which uses libsass instead of the Vaadin Sass compiler.

-Olli

7

Thanks for the options, everyone! I’ll look into them.