Cassette Sass compiling is generating nulls in CSS - sass

Question

Until now we have had a post-build step that uses the Sass gem on the command line to generate our global.css.
I'm swapping over to Cassette, which uses Cassette.Sass, which uses SassAndCoffee, which apparently uses Sass 3.2.0 :-)
However when Cassette does the compiling, I get weird nulls in the generated css. Judging by how the page looks, this is invalid css and screwing up the design.
For eg:
.pure-container {
padding: 31px null;
padding: 1.714rem null;
padding-right: 0.9375%; }
I thought it may be down to a version difference of Sass (as we were using the sass gem for 3.2.8), but if I use the Sass gem version 3.2.0 from the command line, I get the same (valid) output as before I started using Cassette, without nulls:
.pure-container {
padding: 31px;
padding: 1.71429 rem;
padding-right: 0.9375%; }
So to summarize, Cassette.Sass using Sass 3.2.0 is not compiling my CSS in the same way as the Sass 3.2.0 Gem from the command line. What should I check?
I am not a front-end dev and not very familiar with scss, but if it's relevant, this is what our global.scss looks like:
// ----- SCSS Helpers -----
#import "imports/_mixins.scss";
#import "imports/_variables.scss";
// ----- Pure Grid -----
#import "imports/_extend-pure.scss";
// ----- Theme -----
#import "imports/_typography.scss";
#import "imports/_helpers.scss";
#import "imports/_buttons.scss";
#import "imports/_forms.scss";
#import "imports/_modules.scss";
// ----- Media Queries -----
#import "imports/_media-phone.scss";
#import "imports/_media-tablet-query.scss";
#import "imports/_media-desktop-query.scss";
And all those imported files exist and there are no SASS compiling exceptions.
The only mentions of 'null' that I can find is in _mixins.scss:
#mixin size($property: null, $units: 4, $importance: null, $mixin: null) {
// This mixin will calculate the rem values defined by design (6px's in mobile and scaled up for desktop)
// Because IE8 and below don't support rem, we insert the px equivalent for the desktop sizes just before.
$pixel-size: round(((6*$units)*((1/$font-size-mobile)*$font-size-desktop))) + px $importance;
$rem-size: ((1/$font-size-mobile)*(6*$units)) + rem $importance;
#if $mixin == min-height {
#include min-height($pixel-size);
#include min-height($rem-size);
}
#else if $mixin == max-height {
#include max-height($pixel-size);
#include max-height($rem-size);
}
#else {
#{$property}: $pixel-size; // This number is rounded to the nearest whole number to avoid issues with IE7
#{$property}: $rem-size;
}
// EXAMPLE OF HOW TO USE
// #include size(line-height, 4, !important); <-- important is optional
// EXAMPLE OF HOW TO USE 2
// #include size($mixin: min-height, $units: 4);
}
Cassette is otherwise quite awesome and I would love to use it, but this is quite a big barrier! Any thoughts appreciated, including where else I could post this in the hopes of an answer that might help! I am aware that there are other options for compiling Sass, and if I don't get much joy here I'll dump Cassette in favour of MS.Web.Optimization in combination with NSass, but I really want to get Cassette working if I can!
Thanks,
Mark.

Answer 1

null is coming from the default value of $importance.
Put that in an if statement and only apply it when the value is not the default null.
Thanks
#mixin size($property: null, $units: 4, $importance: null, $mixin: null) {
// This mixin will calculate the rem values defined by design (6px's in mobile and scaled up for desktop)
// Because IE8 and below don't support rem, we insert the px equivalent for the desktop sizes just before.
$pixel-val: round(((6*$units)*((1/$font-size-mobile)*$font-size-desktop)));
$rem-val: ((1/$font-size-mobile)*(6*$units));
#if $importance == null {
$pixel-size: $pixel-val + px;
$rem-size: $rem-val + rem;
} #else {
$pixel-size: $pixel-val + px $importance;
$rem-size: $rem-val + rem $importance;
}
#if $mixin == min-height {
#include min-height($pixel-size);
#include min-height($rem-size);
} #else if $mixin == max-height {
#include max-height($pixel-size);
#include max-height($rem-size);
} #else {
#{$property}: $pixel-size; // This number is rounded to the nearest whole number to avoid issues with IE7
#{$property}: $rem-size;
}
// EXAMPLE OF HOW TO USE
// #include size(line-height, 4, !important); <-- important is optional
// EXAMPLE OF HOW TO USE 2
// #include size($mixin: min-height, $units: 4);
}

Answer 2

I tried to build the solution above and i had errors. It seems that setting variables in an if statement keeps those variables private.
here is another solution with anotated comments
#mixin size($property: null, $units: 4, $importance: false, $mixin: null) { // change default value of importance to false
$pixel-size: round(((6*$units)*((1/$font-size-mobile)*$font-size-desktop))) + px;
$rem-size: ((1/$font-size-mobile)*(6*$units)) + rem; // remove importance from here
#if $mixin == min-height {
#include min-height($pixel-size);
#include min-height($rem-size);
}
#else if $mixin == max-height {
#include max-height($pixel-size);
#include max-height($rem-size);
}
#else {
#if $importance { // do the test here
#{$property}: $pixel-size $importance;
#{$property}: $rem-size $importance;
} #else {
#{$property}: $pixel-size;
#{$property}: $rem-size;
}
}
}