Question

我目前正在使用这个mixin：

@mixin isMobile() {
  html[data-browser*="Mobile"] & {
    @content;
  }
}

我想使用这个mixin有条件地应用于变量，如下所示：

$div-height: 20px;
@include isMobile() {
  $div-height: 10px;
}

我知道这不是正确的做法，我也尝试过以下方面但没有成功。我怎样才能正确尝试这个条件？谢谢！

@if (html[data-browser*="Mobile"]) {
  $div-height: 20px;
} @else {
  $div-height: 10px;
};

Answer 1

条件部分必须在mixin中。

@mixin isMobile($type) {
  $div-height: 0;
  html[data-browser*="Mobile"] {
    @if($type == 'A'){
      $div-height: 20px;
    }
    @else{
      $div-height: 10px;
    }
    height: $div-height;
    @content;
  }
}


@include isMobile('B'){
  color:black;
}


/*Output*/
html[data-browser*="Mobile"] {
  height: 10px;
  color: black;
}

使用mixin的条件SASS变量

1 个答案: