[SASS] Jak w najlepszy sposób korzystać z @media queries w SASS?

Question

Witam, myślę, że temat mówi sam za siebie. Chciałbym się dowiedzieć w jaki sposób najszybciej i najwygodniej korzystać z media queries z wykorzystaniem preprocesora sass. Zależy mi na możliwie najkrótszym zapisie, ale także na tym, żeby wynikowy kod css nie był zbyt nadmiarowy.

Pozdrawiam!

Answer 1

http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
https://css-tricks.com/approaches-media-queries-sass/
https://davidwalsh.name/write-media-queries-sass

$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";

p {
  font-size: 16px;
}

@media #{$tablet} {
  p {
    font-size: 18px;
  }
}

@media #{$desktop} {
  p {
    font-size: 20px;
  }
}

Comments

Dzięki wielkie, w tym zapisie denerwuje mnie niemiłosiernie te #{ }, ale to chyba jedyny sposób, żeby kod nie był duplikowany.

---

To może LESS :)

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

---

Less? PostCSS – FTW! Tam można mieć taką składnię, jaką się samemu stworzy ;)