javascript scss响应#css #scss #responsive #mixin

Posted 2021-05-03

$middle-width: 768px;
$large-width: 1024px;

@mixin middle {
  @media (min-width: #{$middle-width}) and (max-width: #{$large-width - 1px}) {
    @content;
  }
}

@mixin large {
  @media (min-width: #{$large-width}) {
    @content;
  }
}

@mixin small {
  @media (max-width:#{$middle-width}) {
    @content
  }
}


#expmple{
    width:500px;
    @include small{
        width:200px;
    }
    @include large{
        widht:600px;
    }
}