SCSS @media mixin

6/Abr/2016 963

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;
  }
}

Link:

Comentarios

  1. kelaGyncclieria [#]

    buy prednisolone online https://deltasoneprednisone.com/ – does prednisone raise blood pressure prednisolone warnings

  2. what is tadalafil [#]

    tadalafil tablets https://nextadalafil.com/ tadalafil 40 mg daily tadalafil 40 mg daily

  3. kelaGyncclieria [#]

    hydroxychloride medicine https://chloroquinehydro.com/ – buy chloroquine aralen hcl

  4. KevinchaWn [#]

    chloroquine tablets buy where to buy chloroquine – chloroquine for sale

  5. tadalafil tablets [#]

    buy tadalafil us https://tadalafilgenc.com/ tadalis sx tadalafil gel

  6. kelaGyncclieria [#]

    side effects of hydroxychloroquine https://hydrochloroquine200.com/ – doctors for hydroxychloroquine hydroxychloroquine online

  7. BotoLyncIntet [#]

    plaquenil medication https://chloroquine250mg.com/ – hydroxychloroquine for covid plaquinol

  8. kelaGyncclieria [#]

    chloroquine phosphate https://hydroxychloroquine20.com/ – chloroquine generic can i buy chloroquine over the counter

  9. ThomasStory [#]

    http://viagrasv.online# viagra price
    online doctor prescription for viagra

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab