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