css - 使用 mixin 的条件 SASS 变量

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