sass响应式断点函数

//响应式断点
$w-width-sm:476px;
$w-width-md:767px;
$w-width-lg:900px;
$w-width-xl:1200px;
$w-fluid:100vw;

//小屏幕下的内边距
$s-screen-padding:20px;

// 响应式模块化
/**
用法:
    @include respond-to(xs) {
      //样式 或者 样式类块
    }

**/ 
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {          //屏幕小于476px xs
    @media (max-width: $w-width-sm) {
      @content;
    }
  } @else if $breakpoint == sm {   //屏幕在477 - 767之间 sm
    @media (min-width: $w-width-sm + 1) and (max-width:$w-width-md) {
      @content;
    }
  } @else if $breakpoint == md { //屏幕在768 - 900之间 md
    @media (min-width: $w-width-md + 1) and (max-width: $w-width-lg) {
      @content;
    }
  } @else if $breakpoint == lg { //屏幕在901 - 1200之间 lg
    @media (min-width: $w-width-lg + 1) and (max-width: $w-width-xl) {
      @content;
    }
  } @else if $breakpoint == xl { //屏幕大于 1200 xl
    @media (min-width: $w-width-xl + 1) {
      @content;
    }
  }
}


// 用于多个断点
/**
用法:
    @include respond-to-multiple(xs, sm) {
      // sm 和 xl 共同的样式
      
    }
**/ 
@mixin respond-to-multiple($breakpoints...) {
  @each $breakpoint in $breakpoints {
    @include respond-to($breakpoint) {
      @content;
    }
  }
}


// 版心 respond-to用法 
.w{
  width:$w-width-xl!important;
  margin:0 auto;

  @include  respond-to(xs) {
    width: 100%!important;
    max-width: $w-width-sm;
  }

  @include  respond-to(sm) {
    width: 100%!important;
    max-width: $w-width-md;
  }

  @include  respond-to(lg) {
    width: 100%!important;
    max-width: $w-width-xl;
  }

}

.w-fluid{
   width: $w-fluid!important;
}