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
Thanks for your entire work on this website. Debby delights in participating in investigation and it is simple to grasp why. Most people know all regarding the dynamic means you deliver precious guidelines on the web blog and strongly encourage contribution from people on that concern then my simple princess is certainly learning a lot of things. Have fun with the remaining portion of the year. You are always performing a fantastic job.
I want to get across my affection for your kind-heartedness in support of folks who have the need for guidance on that concept. Your personal dedication to getting the solution all over ended up being astonishingly useful and have surely helped girls just like me to get to their objectives. The interesting guidelines indicates much a person like me and substantially more to my peers. Best wishes; from everyone of us.
where to buy stromectol http://ivermecton.com/ 3mg ivermactin
Floor Paper Shelf Rack
スーパーコピーバッグ
buy a research paper
build my resume for me
General Information Here this outcome
https://ivermectinstrom.com ivermectin 12 mg
https://ivermectinsts.com ivermectin 3 mg
https://ivermectinstrom.com stromectol
https://ivermectinst.com ivermectin 12 mg
https://ivermectinstrom.com ivermectin for sale