Компиляция кассетного Sass генерирует нули в CSS

Question

До сих пор у нас был шаг после сборки, который использовал гем Sass в командной строке для генерации нашего global.css.

Я перехожу к кассете, которая использует Cassette.Sass, который использует SassAndCoffee, который, очевидно, использует Sass 3.2.0:-)

Однако когда Cassette выполняет компиляцию, я получаю странные нули в сгенерированном CSS. Судя по тому, как выглядит страница, это неверный CSS и испортить дизайн.

Например:

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

Я думал, что это может быть связано с разницей версий Sass (так как мы использовали sass gem для 3.2.8), но если я использую версию 3.2.0 Sass gem из командной строки, я получаю тот же (действительный) вывод как и раньше, я начал использовать кассету без нуля:

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

Подводя итог, можно сказать, что Cassette.Sass, использующий 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.

Единственное упоминание о 'null', которое я могу найти, находится в _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, и если я не получу особой радости, я выброшу кассету в пользу MS.Web.Optimization в сочетании с NSass, но я действительно хочу, чтобы кассета работала, если я Можно!

Спасибо, Марк.

Answer 1

Значение null исходит из значения по умолчанию $ priority.

Поместите это в оператор 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 сохраняет эти переменные закрытыми.

вот еще одно решение с комментариями

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