Cassette Sass 编译在 CSS 中生成空值

Question

到目前为止，我们已经有一个后期构建步骤，它在命令行上使用 Sass gem 来生成我们的 global.css。

我正在换用 Cassette，它使用 Cassette.Sass，它使用 SassAndCoffee，它显然使用 Sass 3.2.0 :-)

但是，当 Cassette 进行编译时，我在生成的 css 中得到了奇怪的空值。从页面的外观来看，这是无效的 css 并且搞砸了设计。

例如：

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

我认为这可能是由于 Sass 的版本差异（因为我们在 3.2.8 中使用了 sass gem），但是如果我从命令行使用 Sass gem 版本 3.2.0，我会得到相同的结果（有效）输出与我开始使用 Cassette 之前一样，没有空值：

.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 的选项，如果我在这里没有得到太多的乐趣，我会转储 Cassette 转而支持 MS.Web.Optimization 与 NSass 的结合，但我真的想让 Cassette 工作，如果我可以！

谢谢， 标记。

Answer 1

null 来自 $importance 的默认值。

将它放在 if 语句中，并且仅在值不是默认 null 时应用它。

谢谢

@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 语句中设置变量会使这些变量保持私有。

这是另一种带有注释的 cmets 的解决方案

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