使用mixin的条件SASS变量

时间:2018-03-11 19:44:38

标签: css sass

我目前正在使用这个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;
};

1 个答案:

答案 0 :(得分: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;
}