Este útil mixin de SCSS me ha ayudado a mantener consistencia y legibilidad en el código de un proyecto donde estamos muchas personas trabajando de manera remota.
La idea es definir los valores normales para el estado que desees (desktop-first, mobile-first) y las variaciones de @media las declaras dentro del mismo selector. Así es fácil saber todas las propiedades y valores que éste tiene, logrando inter-operabilidad en equipos de trabajo de varias personas y teniendo algunos de ellos mantener mi código y vice-versa.
// variables:
$breakpoint-xs: 360px;
$breakpoint-sm: 767px;
$breakpoint-md: 1023px;
$breakpoint-lg: 1360px;
@mixin media($media) {
@if $media == xs {
@media (max-width: $breakpoint-sm) { @content; }
}
@else if $media == sm {
@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) { @content; }
}
@else if $media == md {
@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) { @content; }
}
@else if $media == lg {
@media (min-width: $breakpoint-lg) { @content; }
}
}
Uso:
@include media(xs) {
property: value;
}
Ejemplo (SCSS):
.elemento {
font-size: 1.2em;
color: #c00;
@include media(xs) {
font-size: 1.6em;
}
}
Output (CSS):
.elemento {
font-size: 1.2em;
color: #c00;
}
@media (max-width: 767px) {
.elemento {
font-size: 1.6em;
}
}
Comentarios
vale , muchas gracias por esta solucion, yo hasta ahora solo ocupaba incluyendo un solo media por mixin:
$netbook: 1280px;
//MENU MOBILE
@mixin netbook-cero {
@media (min-width: $netbook) {
@content;
}
}
pero con los «if» podre dejarlo mas ordenado.