sizes.scss (692B)
1 $small-screen: 48em; 2 $normal-screen: 64em; 3 $wide-screen: 75em; 4 5 :root { 6 --gutter-width: 1rem; 7 --outer-margin: 2rem; 8 --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1); 9 --half-gutter-width: calc((var(--gutter-width) * 0.5)); 10 } 11 12 @custom-media --sm-viewport only screen and (min-width: $small-screen); 13 @custom-media --md-viewport only screen and (min-width: $normal-screen); 14 @custom-media --lg-viewport only screen and (min-width: $wide-screen); 15 16 @mixin build-mixin-sizes($name) 17 { 18 .#{$name} { @content; }; 19 .#{$name}-xs { @content; }; 20 21 @each $viewport-size in ('sm', 'md', 'lg') { 22 @media (--#{$viewport-size}-viewport) { 23 .#{$name}-#{$viewport-size} { @content; }; 24 } 25 } 26 }