Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 03:53:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(breakpoint): simplify @mixin respond

Browse Source
This commit is contained in:
Jimmy 2021-06-20 12:15:07 +02:00
parent 1b04ae3323
commit 843fb9805f
1 changed files with 14 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
assets/scss/breakpoints.scss
View File

@ -1,32 +1,19 @@
$on-phone: 640px;
$on-tablet: 768px;
$on-desktop: 1024px;
$on-desktop-large: 1280px;
$breakpoints: (
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
2xl: 1536px,
);
@mixin respond($breakpoint) {
@if ($breakpoint == sm) {
@media (min-width: 640px) {
@content;
}
}
@if ($breakpoint == md) {
@media (min-width: 768px) {
@content;
}
}
@if ($breakpoint == lg) {
@media (min-width: 1024px) {
@content;
}
}
@if ($breakpoint == xl) {
@media (min-width: 1280px) {
@content;
}
}
@if ($breakpoint == 2xl) {
@media (min-width: 1536px) {
@content;
@each $bp, $size in $breakpoints {
@if not map-has-key($breakpoints, $breakpoint) {
@warn "'#{$breakpoint}' is not a valid breakpoint";
} @else {
@media (min-width: $size) {
@content;
}
}
}
}