Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/csharp-4.0/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/heroku/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
CASE Sass编译正在CSS中生成空值_Sass_Cassette - Fatal编程技术网

CASE Sass编译正在CSS中生成空值

CASE Sass编译正在CSS中生成空值,sass,cassette,Sass,Cassette,到目前为止,我们已经有了一个构建后步骤,它使用命令行上的Sass gem来生成我们的global.css 我换成卡带,它使用卡带。Sass,它使用SassAndCoffee,它显然使用Sass3.2.0:-) 然而,当CASE进行编译时,我在生成的css中得到奇怪的空值。从页面的外观来看,这是无效的css,并且破坏了设计 例如: .pure-container { padding: 31px null; padding: 1.714rem null; padding-right: 0.9375%

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

我换成卡带,它使用卡带。Sass,它使用SassAndCoffee,它显然使用Sass3.2.0:-)

然而,当CASE进行编译时,我在生成的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版,我会得到与开始使用CASE之前相同的(有效)输出,没有空值:

.pure-container {
padding: 31px;
padding: 1.71429 rem;
padding-right: 0.9375%; }
总而言之,使用Sass 3.2.0的caste.Sass并不像从命令行编译Sass 3.2.0 Gem那样编译CSS。我应该检查什么

我不是前端开发人员,也不太熟悉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中找到对“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-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);
}
@mixin size($property:null,$units:4,$importance:null,$mixin:null){
//该混音器将计算设计定义的rem值(移动设备中为6px,桌面上为放大)
//因为IE8及以下版本不支持rem,所以我们在之前插入了与桌面大小相同的px。
$像素大小:圆形((6*$单位)*((1/$移动字体大小)*$桌面字体大小))+px$重要性;
$rem大小:((1/$font大小移动)*(6*$units))+rem$重要性;
@如果$mixin==最小高度{
@包括最小高度(像素大小);
@包括最小高度($rem尺寸);
}
@如果$mixin==最大高度,则为else{
@包括最大高度(像素大小);
@包括最大高度($rem尺寸);
}
@否则{
#{$property}:$pixel size;//此数字四舍五入到最接近的整数,以避免IE7出现问题
#{$property}:$rem大小;
}
//如何使用的示例

//@include size(行高,4,!important);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);
}
@mixin size($property:null,$units:4,$importance:null,$mixin:null){
//该混音器将计算设计定义的rem值(移动设备中为6px,桌面上为放大)
//因为IE8及以下版本不支持rem,所以我们在之前插入了与桌面大小相同的px。
$pixel val:round((6*$units)*((1/$font size手机)*$font size桌面));
$rem val:((1/$font size移动)*(6*$units));
@如果$importance==null{
$pixel size:$pixel val+px;
$rem大小:$rem val+rem;
}@else{
$pixel size:$pixel val+px$重要性;
$rem大小:$rem val+rem$重要性;
}
@如果$mixin==最小高度{
@包括最小高度(像素大小);
@包括最小高度($rem尺寸);
}@else如果$mixin==最大高度{
@包括最大高度(像素大小);
@包括最大高度($rem尺寸);
}@else{
#{$property}:$pixel size;//此数字四舍五入到最接近的整数,以避免IE7出现问题
#{$property}:$rem大小;
}
//如何使用的示例

//@include size(行高,4,!important);我试图构建上面的解决方案,但出现了错误。似乎在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;        
    }
  }
}