Very basic implementation

[jnicklas]

Since this was pretty much empty I figured I might as well share my hacked together solution. Basically this just wraps node-sass in some promises, and lets it do its thing. There isn't any caching yet since node-sass is fast enough even for huge files, but it shouldn't be hard to add.

[simonexmachina]

Really looking forward to having SASS support (however basic) in Brocolli. It's the only thing that's holding us back from hopping on board.

[jnicklas]

@joliss I see that you went another route in your implementation. The addition of being able to read from multiple trees is very useful, and much better than my hack with includePaths.

However, I've found the ability to specify a glob of files and having them all compile (similar to how the CS filter works) to be very useful. In the project I'm trying Broccoli on, I have multiple scss files, and having to specify a filter for each is a bit annoying. Also, I think it's a very rare thing that a user wouldn't want the filename.scss -> filename.css mapping.

So my proposal is to make broccoli-sass work more like broccoli-coffee, kind of like I did in my PR. I could try to make this work and send a PR, what do you think?

[chrism]

@jnicklas Not sure if this helps in your workflow but I am using multiple .scss files with a very simple setup.

Basically I am using one app.scss which in the Brocfile.js am referencing like this:

var applicationCss = compileSass(sourceTrees, 'app/styles/app.scss', 'assets/app.css');

And then in the app.scss file I load in the additional scss files using @import like this:

@import "vendor/modularized-normalize-scss/normalize";
@import "vendor/bourbon/app/assets/stylesheets/bourbon";
@import "vendor/neat/app/assets/stylesheets/neat";

// GLOBALS
@import 'globals/colors.scss';

// COMPONENTS
@import "components/main-navigation.scss";

/* Project CSS */

So far I've found this approach to work brilliantly - and have to say great work to @joliss.

Hope this approach might be useful to you too.

[joliss]

@jnicklas Ah, sorry, I meant to get back to this PR. Yes, cases like Sass were the primary motivator for supporting plugins with multiple input trees indeed.

Re compiling to multiple output files:

How many output files are you compiling into?

I asked on Twitter, and my impression was that mostly people have 1-4 output files, but vastly more .scss files. So I decided against a filter-like implementation like broccoli-coffee, because you would probably just end up having most of your files prefixed with underscores. I'm open to hearing about more use cases though.

[jnicklas]

@joliss not too many, that's true. In my case I imported everything from an existing project, so the files were already "underscored", but you're right that it seems nicer and cleaner not littering everything with underscores. A middle ground might be not globbing for all scss files, but rather a few specific files, but I'm not sure if this is such a huge advantage over the current state either. With JS, people are going to end up using some kind of concatenation too.

If we're thinking really far into the future, HTTP2 is pretty much going to remove the incentive to concatenate files together, since it makes requests super cheap. Might be worth contemplating, but I'm not sure it should affect any design decisions now.

[rlivsey]

@joliss I've got one .css output file, but currently have one .sass file per component which is "orphaned" in that it's not referenced by the main.sass. Previously I just concatenated them into one file after compiling.

It's not a big deal to explicitly add @import's for each one of them however and in some ways that's better as then I can keep components around without loading in their css if I don't use one for a while…

[joliss]

Cool, thanks all. I'll close this for now then. We can revisit batch-compiling scss files in the future if it comes up for people.

Hey Jonas, I remember you giving me commit bit on Capybara three years ago (almost to the day). I think I was mostly pushing minor fixes, but it really helped me get my feet wet on GitHub. Thanks for the early support & mentoring, it's good memories!