Cassette Sass編譯在CSS中產生空值

Question

到現在爲止，我們已經有了一個構建後的步驟，它使用命令行上的Sass gem來生成我們的global.css。

我換到磁帶，它採用Cassette.Sass，它採用SassAndCoffee，這顯然使用薩斯3.2.0 :-)

然而，當磁帶不編譯，我得到怪異空的產生CSS。根據頁面的外觀來判斷，這是無效的css，並搞砸了設計。

對於如：

.pure-container { 
padding: 31px null; 
padding: 1.714rem null; 
padding-right: 0.9375%; } 

我想這可能是到薩斯的版本差（因爲我們是用青菜寶石爲3.2.8），但如果我用的是薩斯寶石3.2版。 0在命令行中，我得到相同的（有效）輸出之前，我開始使用盒，無空：

.pure-container { 
padding: 31px; 
padding: 1.71429 rem; 
padding-right: 0.9375%; } 

所以總結一下，Cassette.Sass使用薩斯3.2.0不編譯我的CSS中與命令行中的Sass 3.2.0 Gem相同。我應該檢查什麼？

我不是前端開發和不是很熟悉SCSS，但如果是相關的，這是我們的global.scss樣子：

// ----- 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"; 

而且存在所有這些進口的文件，並有沒有SASS編譯異常。

唯一提到「空」，我能找到的是在_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); 
} 

盒，否則相當真棒，我喜歡使用它，但是這是一個相當大的障礙！任何想法都會受到讚賞，包括我可以在哪裏發佈此信息，希望得到可能有所幫助的答案！我知道還有其他的編譯Sass的選項，如果我在這裏沒有太多的樂趣，我會轉儲Cassette來支持MS.Web.Optimization與NSass的結合，但是我真的想讓卡帶工作，如果我能夠！

感謝， 馬克。

Answer 1

null來自$ importance的默認值。

把它放在一個if語句中，只在值不是默認的空值時才應用它。

感謝

@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

我試圖建立上述解決方案，我有錯誤。似乎在if語句中設置變量會使這些變量保持私有狀態。

這裏是anotated註釋的另一解決方案

@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;   
    } 
    } 
}