Consider node-sass or lib-sass as a replacement for ruby sass

[gruppjo]

Consider node-sass or lib-sass as a replacement for ruby sass thus get rid of the ruby/sass dependency

https://github.com/dlmanning/gulp-sass
https://github.com/sass/node-sass (gulp-sass may not work with plumber)
https://github.com/sass/libsass
https://github.com/medialize/sass.js (emscripten, so no libsass installation is needed, cumbersome on windows)

[MathiasTim]

what about https://github.com/sass/libsass ?!

[gruppjo]

Thanks @MathiasTim. Good idea.

[DrMabuse23]

I think it would be nice to let the user the choice and implement some prompt for that node-sass or ruby-sass

[gruppjo]

Here are my findings so far:

different projects

Libass is just the library to compile sass natively in C to css. To actually run it, you need a wrapper to execute it. This can be done using sassc a command line driver (install via brew brew install sassc) or a language wrapper like node-sass, sass.js is basically the same thing just for the use in the browser.

sassc

At first I ran sass using and it was incredibly fast. From the command line it felt pretty much instant (even when compiling the whole ionic sass).

gulp-sass

I used gulp-sass to run the whole thing with gulp on mac & windows (using virtual box and the window 7 with ie10 from modern.ie http://dev.modern.ie/tools/vms/). Despite the node-sass installation notes which suggest that it's only a binding and you need to install libsass for yourself, this is not the case. Even on windows where it state that visual studio is required on windows, gulp-sass installed and ran flawlessly without it. I assume they're providing precompiled binaries.

The results?

speed

Well... See for yourself. First is ruby-sass, second is gulp-sass. Quite the opposite of what I was expecting. Maybe they're using an emscriptened version of libsass, but why wouldn't it say so in the readme?

sourcemaps, autoprefixer, error handling

gulp-sass works without any problems, with sourcemaps and autoprefixer. Error-handling is not satisfying though, because it doesn't work with plumber effectively halting the gulp watch task when you have any errors, even if you catch them.

Try for yourself

If you want, you can try for yourself cloning this branch (https://github.com/mwaylabs/generator-m/tree/lib-sass) of the generator and npm link it and then run `yo m --skip-prompts'.

[gruppjo]

research plumber use

[gruppjo]

Some issues I found regarding the slow compilation speed with node-sass:

• gulp-sass Speeds much slower > 2.0.0? dlmanning/gulp-sass#258
• lib-sass 3.2 is noticeably slower sass/libsass#1205
• node-sass Potential performance regressions in 3.0.0 sass/node-sass#970

[gruppjo]

plumber use:

• Gulp crashes when there's an error in my sass files dlmanning/gulp-sass#44
• Stops writing CSS after first error in SASS dlmanning/gulp-sass#90

Improvement suggestion for implementation: dlmanning/gulp-sass#90 (comment)

[gruppjo]

name main.scss module.scss

[telemakhos]

Compiling SASS is really slow compared to other projects like Swiip's generator-gulp-angular, I'd say it's almost unusable... The current defaults for the generator seems like don't fix the issue. If you managed to fix this could you point us to the solution? Maybe downgrading node-sass/libsass?

[gruppjo]

Hi @telemakhos, thanks for your feedback. Could you please provider further information on your issue:

• which OS are you running (Mac OSX, Windows 7/8, ...)
• which version of node are you running node -v
• what kind of drawbacks are you experiencing?
  • note that a compile time of 2 to 6 seconds is common (more on windows), when the whole ionic scss is compiled in every step (which the generator does because we like to enhance the ionic sass for our projects).

If this problem persists, please open a new issue or refer to this one, if the speed of your compilation is within the above tolerance:
#212

[telemakhos]

which OS are you running

OSX Yosemite 10.10.4

which version of node are you running

v0.12.4

what kind of drawbacks are you experiencing?

As you mention, the gulp scss task takes 6 secs to compile. We have several projects with gulp + scss with node-sass with much bigger stylesheet codebases and all compile times are 0-2 secs (what we understand as usable). So we thought something was wrong with this boilerplate defaults...

I will try to include the precompiled ionic css as you say, or maybe tweak the gulp tasks...

[gruppjo]

Hi @telemakhos, sorry for the late reply. I fell sick and it took me a while to recover.
I think it would be good idea to be able to choose whether you want precompiled ionic css or the sass version. This shouldn't be a major change so I think we might implement it soon.
See #212.
If you find out anything about the overall performance of gulp-sass/node-sass or possible tweaks for the gulp tasks, please let us know. We've been doing some digging around on these topics as well. I can't say with overwhelming success so far...

[telemakhos]

Hi @gruppjo, your proposal is a nice temporary fix, but the decrease in performance should be addressed in its origin. We've pinpointed the source of the problem in the node-sass module.

Until the issue is (hopefully) resolved, some of us are downgrading. Consider using gulp-sass 1.3.3 (node-sass 2.1.1) in the mean time. Ionic Framework guys are still using node-sass 2.x in their official boilerplates and the framework users are doing just fine.

[gruppjo]

@telemakhos, the master version of the generator now supports to choose the precompiled css of ionic as of 38ae043.
Additionally we prepared a guide how to switch from one to the other (gulp tasks, etc...) in the docs, see https://github.com/mwaylabs/generator-m/blob/master/docs/guides/ionic_css_or_sass.md.