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
buy prednisolone online https://deltasoneprednisone.com/ – does prednisone raise blood pressure prednisolone warnings
Brass Gas Fitting
Medical Instruments
tadalafil tablets https://nextadalafil.com/ tadalafil 40 mg daily tadalafil 40 mg daily
buy hcq https://hydroxychloroquin1mg.com/ – buy hydroxychloroquine can you buy chloroquine over the counter
hydroxychloride medicine https://chloroquinehydro.com/ – buy chloroquine aralen hcl
chloroquine tablets buy where to buy chloroquine – chloroquine for sale
buy tadalafil us https://tadalafilgenc.com/ tadalis sx tadalafil gel
Pneumatic Jack Hammer For Sale
side effects of hydroxychloroquine https://hydrochloroquine200.com/ – doctors for hydroxychloroquine hydroxychloroquine online
plaquenil medication https://chloroquine250mg.com/ – hydroxychloroquine for covid plaquinol
chloroquine phosphate https://hydroxychloroquine20.com/ – chloroquine generic can i buy chloroquine over the counter
http://viagrasv.online# viagra price
online doctor prescription for viagra