blessing-skin-server/resources/assets/src/styles/_breakpoints.scss
2020-02-17 18:27:56 +08:00

28 lines
473 B
SCSS

@use 'sass:map';
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
);
@mixin less-than($breakpoint) {
@media (max-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
@mixin between($down, $up) {
@media (min-width: map-get($breakpoints, $down)) and (max-width: map-get($breakpoints, $up)) {
@content;
}
}
@mixin greater-than($breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}