scss 断点scss mixins

Posted 2021-05-17

## Breakpoints

   * **Portrait**

   Generally works with Phones in portrait mode (0px min, 479px max)
   
   * **Landscape**
    
   For phones in landscape mode (480px min, 767px max)

   * **landscape-down**
    
   From landscape and everything down

   * **landscape-up**
    
   From landscape and everything up

   * **tablet**
    
   works for most tablets (768px min, 991px max)

   * **tablet-down **
    
   from tablet to everything down

   * **tablet-up**
    
   From tablet to everything above

   * **laptop**
    
   For laptops (992px min, 1199px max )

   * **laptop-down**
    
   From laptop to everything below

   * **laptop-up**
    
   From laptop to everything above

   * **desktop**
    
   everything bigger than 1200px

   * **custom()**
    
   You can create a custom media query with 2 parameters:
      * min-width
      * max-width

   * **custom-down()**
    
   You can create a custom media query with 1 parameter:
   Everything bigger than the given parameter
      * max-width

   * **custom-up()**
    
   You can create a custom media query with 1 parameter:
   everything smaller than given parameter
      * min-width

   * **customy()**
    
   the same as custom() but with with the height parameters
      * min-height
      * max-height

   * **customy-down()**
    
   The same as custom-down() but width height parameter
      * max-height

   * **customy-up()**
    
   The same as custom-up() but width height parameter
      * min-height

$portrait-max: 480px;
$landscape-max: 768px;
$tablet-max: 992px;
$laptop-max: 1200px;
@mixin portrait {
    @media (max-width: #{$portrait-max - 1}) {
        @content;
    }
}
@mixin landscape {
    @media (min-width: #{$portrait-max}) and (max-width: #{$landscape-max - 1px}) {
        @content;
    }
}
@mixin landscape-down {
    @media (max-width: #{$landscape-max - 1px}) {
        @content;
    }
}
@mixin landscape-up {
    @media (min-width: #{$portrait-max}) {
        @content;
    }
}
@mixin tablet {
    @media (min-width: #{$landscape-max}) and (max-width: #{$tablet-max - 1px}) {
        @content;
    }
}
@mixin tablet-down {
    @media (max-width: #{$tablet-max - 1px}) {
        @content;
    }
}
@mixin tablet-up {
    @media (min-width: #{$landscape-max}) {
        @content;
    }
}
@mixin laptop {
    @media (min-width: #{$tablet-max}) and (max-width: #{$laptop-max - 1px}) {
        @content;
    }
}
@mixin laptop-down {
    @media (max-width: #{$laptop-max - 1px}) {
        @content;
    }
}
@mixin laptop-up {
    @media (min-width: #{$tablet-max}) {
        @content;
    }
}
@mixin desktop {
    @media (min-width: #{$laptop-max}) {
        @content;
    }
}
@mixin custom($custommin, $custommax) {
    @media (min-width: #{$custommin}) and (max-width: #{$custommax}) {
        @content;
    }
}
@mixin custom-up($custommin) {
    @media (min-width: #{$custommin}) {
        @content;
    }
}
@mixin custom-down($custommax) {
    @media (max-width: #{$custommax}) {
        @content;
    }
}
@mixin customy($custommin, $custommax) {
    @media (min-height: #{$custommin}) and (max-height: #{$custommax}) {
        @content;
    }
}
@mixin customy-up($custommin) {
    @media (min-height: #{$custommin}) {
        @content;
    }
}
@mixin customy-down($custommax) {
    @media (max-height: #{$custommax}) {
        @content;
    }
}