scss 通过mixin管理CSS断点。尺寸基于材料的断点。

Posted 2021-05-18

///////////////////////////
//
// Breakpoints Mixin
//
@mixin bp($point) {

  @if $point == 'layout-xs' {
    @media (max-width: 599px) { @content; }
  }

  @if $point == 'layout-gt-xs' {
    @media (min-width: 600px) { @content; }
  }

  @if $point == 'layout-sm' {
    @media (min-width: 600px) and (max-width: 959px) { @content; }
  }

  @if $point == 'layout-gt-sm' {
    @media (min-width: 960px) { @content; }
  }

  @if $point == 'layout-md' {
    @media (min-width: 960px) and (max-width: 1279px) { @content; }
  }

  @if $point == 'layout-gt-md' {
    @media (min-width: 1280px) { @content; }
  }

  @if $point == 'layout-lg' {
    @media (min-width: 1280px) and (max-width: 1919px) { @content; }
  }

  @if $point == 'layout-gt-lg' {
    @media (min-width: 1920px) { @content; }
  }

  @if $point == 'layout-xl' {
    @media (min-width: 1920px) { @content; }
  }

}

// Use
.foo {
  width: 100%;
  
  @include bp('layout-gt-sm') {
    width: 33%;
  }
}