Compiling SASS throughs random errors (that aren't actually errors)

[neopostmodern]

Since I had to add fourseven:scss as a dependency my SASS files, my project won't build. It throughs random errors like this one:

=> Errors prevented startup:

While building the application:
client/styles/site.sass: Scss compiler error: undefined
/[...]/client/styles/nav:128: error: invalid property name

But both my native compiler (through Ubuntu/WebStorm) and SassMeister compile my files without any error.

[fourseven]

Hi, would you be able to isolate which .sass files/sections cause problems for me please? Perhaps as another github repo that I can pull down and test against.

[neopostmodern]

I unfortunately can't publish production code, but I guess I can share our SASS mixins. This file blew up in about every line of the fade-white-right and fade-white-left declaration (I uncommented them individually without impact. Only uncommenting both entire blocks worked).

=shadow($distance, $color)
  -webkit-box-shadow: 0px 0px $distance $color
  -moz-box-shadow: 0px 0px $distance $color
  box-shadow: 0px 0px $distance $color

=fade-white-right
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 100%) // FF3.6+
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(88%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))) // Chrome,Safari4+
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 88%,rgba(255,255,255,1) 100%) // Chrome10+,Safari5.1+
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 88%,rgba(255,255,255,1) 100%) // Opera 11.10+
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 88%,rgba(255,255,255,1) 100%) // IE10+
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 88%,rgba(255,255,255,1) 100%) // W3C
=fade-white-left
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12%, rgba(255,255,255,0) 100%) // FF3.6+
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(12%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))) // Chrome,Safari4+
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 12%,rgba(255,255,255,0) 100%) // Chrome10+,Safari5.1+
  background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 12%,rgba(255,255,255,0) 100%) // Opera 11.10+
  background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 12%,rgba(255,255,255,0) 100%) // IE10+
  background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 12%,rgba(255,255,255,0) 100%) // W3C

=flexbox
  display: -webkit-box
  display: -moz-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex

=flexbox-direction($direction)
  @if $direction == "row"
    -webkit-box-direction: normal
    -moz-box-direction: normal
    -webkit-box-orient: horizontal
    -moz-box-orient: horizontal
  @else if $direction == "column"
    -webkit-box-direction: normal
    -moz-box-direction: normal
    -webkit-box-orient: vertical
    -moz-box-orient: vertical

  -webkit-flex-direction: $direction
  -ms-flex-direction: $direction
  flex-direction: $direction

=link
  cursor: pointer

=placeholder
  text-transform: uppercase
  font-size: 60%
  padding-top: 0.6em
  padding-left: 20px
  font-weight: 400
  color: #999

[neopostmodern]

Is there anyway I can at least deactivate the compiler all-together and use another tool that works? I had to update it to 0.9.5 for some dependencies and now I can't start my project anymore.

[fourseven]

I'll look into this over the next few days, I have been waiting for meteor's packaging system to stabilize.

[neopostmodern]

Any news on this?

[electricjesus]

Please take note though that libsass doesn't support Sass 3.3.. only a subset of it.. it isn't even 3.2 feature complete. Maybe your issue is there somewhere?

Also all those vendor stuff can be covered by the new Autoprefixer, i think. Correct me if i'm wrong!

@neopostmodern

Is there anyway I can at least deactivate the compiler all-together and use another tool that works? I had to update it to 0.9.5 for some dependencies and now I can't start my project anymore.

You mean like ruby sass? I'm also interested in such way.. but I really like meteor-scss so I made it a point that our project would always compile under libsass. I feel I should share that we considered for a while maintaining our assets (all frontend stuff, like styles/images/sprites) in another git project and we could potentially just include built CSS files via meteor-bower. Just an idea for you.. because:

Please note that this project uses LibSass. As such some features are not implemented compared to the Ruby version/implementation. Things are improving, so please be patient. Before you ask, I have no intention of making a version of this package that links to the Ruby version instead.

(-- in the README)

[neopostmodern]

No, what i was asking for would be a kind of flag in the scss.json to disable the compiler altogether. I currently have it as a dependency to another package, but I would be fine using another compiler.

Concerning LibSass (is that this: http://libsass.org/ ?):
I removed all vendor prefixes, that seems great, but I still run into bugs that just can't be. Is there any online tool where I can see if they reproduce?

[electricjesus]

No reliable online tool, unfortunately. Sassmeister is the closest but isn't as reliable either (you can try the Libsass engine at the settings dropdown.. you can find it at the upper right portion of the screen).

I'm pretty sure you could set up a quick node project with grunt and grunt node-sass to conduct tests.

[neopostmodern]

Okay, Sassmeister totally failed, I'll set up a local node project when I get the time then.
I'll close the issue for now though, as it's most likely libsass and not this package that is screwing things up.