4 ms·
Here you go, these are IMO the best 3 sass mixins everyone should know for responsive web queries. I didn't find any articles on it its just the ones I found to
by Kagerjay 8y ago
Here you go, these are IMO the best 3 sass mixins everyone should know for responsive web queries. I didn't find any articles on it its just the ones I found to be most useful.
Use the mixins I defined below, I usually compact them, and use a macro to automatically paste it. mixin# is what I type. Add your custom classes needed for responsive layouts.
My breakpoint defaults are based on bootstrap 4, with some added ones for larger desktop screens.
320px, 576px, 768px, 992px, 1200px, 1400px, 1600px
You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent.
If you use tachyons, continue using tachyons first and foremost. But when it doesn't give you everything you need, put a custom CSS class on those HTML element(s) and define your own custom CSS as outlined below.
------------------------------------------------------------------
These mixins are for specifying the following
- Anything above a certain screen width mobile-first-design
- Anything below a certain screen width desktop-first-design
- Anything inbetween two values hybrid
I pick one approach for each component I work with, but generally speaking I use almost all mobile-first-designs media queries and maybe 1 desktop-first-design media query per given CSS class. I rarely use the hybrid approach, because it just means you should have used CSS grid over flexbox etc
------------------------------------------------------------------
@mixin screen-min($min) {
@media (min-width: $min) {
@content
}
};
@mixin screen-max($max) {
@media (max-width: $max - 1) {
@content
}
};
@mixin screen-minmax($min, $max){
@media (min-width: $min) and (max-width: $max - 1){
@content
}
};
------------------------------------------------------------------
// USING THE MIXINS
// Example - Writing a custom bootstrap-like container from scratch
------------------------------------------------------------------
.container {
margin: 0 auto;
width: 100%;
@include screen-min(768px){max-width: 750px;}
@include screen-min(992px){max-width: 970px;}
@include screen-min(1200px){max-width: 1170px;}
@include screen-min(1400px){max-width: 1370px;}
@include screen-min(1600px){max-width: 1570px;}
}