What's the best way to use Sass in a Meteor app?

[Ben Gott]

Do you use Sass regularly in Meteor projects? If so, what's your preferred method for compiling Sass to CSS? A quick search for "sass" on Atmosphere yields several packages, but I've only used LESS and Stylus, so I haven't tried them. It looks like most of them use node-sass (via libsass) and one requires the ruby gem. Also, I read that libsass is not at feature parity with the ruby version, so it's got some limitations. Do any of the packages on Atmosphere work well enough for you? If not, are you using an app like CodeKit or Scout?

This question was prompted by a comment I made on a pull request to Telescope (and Sacha's reply):

https://github.com/TelescopeJS/Telescope/pull/380

Thanks,

Ben

[Julian Ćwirko]

Works well for me: http://atmospherejs.com/fourseven/scss (node-sass (Libsass) version)

[Aaron Gray]

+1 for the fourseven:scss package. They are active and typically update the package – if needed, to support the latest Meteor version – very quickly.

Just use:

$ meteor add fourseven:scss

to install.

[Julian Ćwirko]

There is one problem with Sass and Meteor (not related with particular packages)
..usually these packages are based on Libsass and Libsass is not compatible with Sass 3.4.x (only 3.2 I think)

[Ben Gott]

Thanks for the recommendations.

Looks like it's currently impossible to use Compass with LibSass since Compass uses several Sass 3.3/3.4 features, and this is a deal breaker for some folks. What do you use instead to provide support for popular mixins like border-radius, etc.?

Also, it looks like incorrect @extend compilation is currently the biggest issue (https://github.com/sass/libsass/issues/146), but they're making good progress in fixing it. Many common uses of @extend appear to be fixed already. :)

Thanks again,

Ben

[Aaron Gray]

It's a bummer that LibSass doesn't support the latest features required by Compass and others. Here is a terrible idea for a workaround that should let one use the latest Sass gem in a Meteor app:

Given that A) Compass lets one specify a Sass input and a CSS output directory in a config file and B) Meteor doesn't compile assets in the /tests/ directory, one could point Compass to a subfolder – say, '/tests/styles_hack/' – in the /tests/ directory and compile it to anywhere else in their Meteor app. See the Compass config docs here.

That's so hacky I feel bad for thinking it. It would let us use the latest and greatest Sass gem from our local environments, but there are a ton of disadvantages. Does anyone know what it would take to build a package that uses a developers local gem files instead?

- ag

[Ben Gott]

As far as I know, you can put your SCSS files pretty much anywhere (e.g. /client/stylesheets/scss/), and Meteor will ignore them, unless of course you've added a package like fourseven:scss -- so no need for your hack. For an example workflow, check out Jeremy's reply on my crater.io post: http://crater.io/posts/XRZRvnv2CaYTK5tyF

-Ben

[Mathew Hartley]

Hey all,

I'm the maintainer of the scss package, and actively made the decision to use node-sass over the ruby gem. It's true that it's not at feature parity with the ruby version, but I don't believe a ruby dependancy should exist for node.js/javascript projects (even as a Ruby developer in my day job). 

I try to keep the gem at the same version as node-sass, but still need to build a i386 linux version for the new packaging system. If anyone is interested in helping me maintain it let me know, it's not too much effort.

Thanks, 

Mathew

[Marcel Medak]

Hi Ben,

personally I use Stylus + nib as an alternative to Sass + Compass. It works well for me. Maybe you give it try. I wrote a short blog post at http://marcelmedak.com/using-stylus-and-nib-as-an-alternative-to-compass-in-your-meteor-app/  

- Marcel

[Jon James]

+1 for Stylus + nib

Use the .import.styl filename extension to prevent Meteor from compiling files you want to @import into your main .styl files...works great.

Jon

[Julian Ćwirko]

Or Stylus + Autoprefixer + Jeet (http://jeet.gs) ;)

[Jakob Dam Jensen]

In the projects where I use Sass and Compass I've added at Gemfile to keep versions correct and an Grunt file which starts the compass watch and the meteor server. Works great IMO

[Ben Gott]

Update: Exciting stuff happening with the LibSass project. Looks like they've made lots of progress, and we're getting close to having a fully compatible version running on Node.js! https://github.com/sass/libsass/releases

[אילנה חכים‎]

Hi -

I tried to install this package (windows version) and got:

C:\>meteor add fourseven:scss

 => Errors while adding packages:

While checking for fourseven:sc...@1.2.3:

error: No compatible build found

בתאריך יום שני, 29 בספטמבר 2014 בשעה 00:36:26 UTC+3, מאת Mathew Hartley:

[Mathew Hartley]

Hi,

There's an outstanding issue on the tracker about windows support, go here to follow - https://github.com/fourseven/meteor-scss/issues/64

Thanks!

[dcsan]

use stylus :)

sass is messing up the meteoric project too

https://github.com/meteoric/meteor-ionic/issues/45

[Mathew Hartley]

That should be resolved for ionic - see my comment there for more details. Sorry about the hassle, SCSS is the only css pre-processor not supported by meteor core and it's also the only one that requires build-specific packages.