Próbuję połączyć użycie zmiennej Sass z zapytaniami @media w następujący sposób:
$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}
$base_width
jest następnie definiowana w różnych punktach w pomiarach procentowych szerokości arkusza stylów w celu uzyskania płynnych układów.
Kiedy to robię, zmienna wydaje się być poprawnie rozpoznawana, ale warunki zapytania o media nie. Na przykład powyższy kod tworzy układ 1160px niezależnie od szerokości ekranu. Jeśli przerzucę oświadczenia @media w następujący sposób:
@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}
Tworzy układ 960px, niezależnie od szerokości ekranu. Zauważ również, że jeśli usunę pierwszą linię $base_width: 1160px;
, zwróci błąd dla niezdefiniowanej zmiennej. Jakieś pomysły, czego mi brakuje?
sass
media-queries
Jeremy S.
źródło
źródło
Odpowiedzi:
To po prostu niemożliwe. Ponieważ wyzwalacz
@media screen and (max-width: 1170px)
występuje po stronie klienta.Osiągnięcie oczekiwanego wyniku byłoby możliwe tylko wtedy, gdyby SASS przechwycił wszystkie reguły i właściwości w arkuszu stylów zawierającym
$base_width
zmienną i odpowiednio je skopiował / zmienił.Ponieważ nie zadziała automatycznie, możesz to zrobić ręcznie w następujący sposób:
To nie jest naprawdę SUCHE, ale najlepsze, co możesz zrobić.
Jeśli zmiany są takie same za każdym razem, możesz również przygotować mixin zawierający wszystkie zmieniające się wartości, więc nie musisz tego powtarzać. Dodatkowo możesz spróbować połączyć mixin z określonymi zmianami. Lubić:
A Mixin wyglądałby tak
źródło
$foo: 1rem; @media (min-width: 10rem) {$foo: 2rem} .class {font-size: $foo} .class2 {padding: $foo}
spowodowałoby.class {font-size: 1rem} .class2 {padding: 1rem} @media (min-width: 10rem) (.class {font-size: 2rem} .class2 {padding: 2rem}}
Podobnie jak w przypadku odpowiedzi Philippa Zedlera, możesz to zrobić za pomocą miksera. Dzięki temu możesz mieć wszystko w jednym pliku, jeśli chcesz.
źródło
Edycja: nie używaj tego rozwiązania. Odpowiedź Ronena jest znacznie lepsza.
Jako rozwiązanie DRY możesz użyć
@import
instrukcji wewnątrz zapytania o media, np. W ten sposób.Definiujesz wszystkie responsywne elementy zawarte w pliku za pomocą zmiennych zdefiniowanych w zapytaniu o media. Zatem wszystko, co musisz powtórzyć, to instrukcja importu.
źródło
Nie jest to możliwe w przypadku SASS, ale jest to możliwe w przypadku zmiennych CSS (lub niestandardowych właściwości CSS ). Jedyną wadą jest obsługa przeglądarek - ale w rzeczywistości istnieje wtyczka PostCSS - postcss-css-variable - która „spłaszcza” użycie zmiennych CSS (co zapewnia obsługę również starszych przeglądarek).
Poniższy przykład działa świetnie z SASS (a ze zmiennymi postcss-css-otrzymujesz również wsparcie dla starszych przeglądarek).
Spowodowałoby to następujący CSS. Powtarzające się zapytania o media zwiększą rozmiar pliku, ale odkryłem, że wzrost jest zwykle pomijalny po zastosowaniu serwera WWW
gzip
(co zwykle robi się automatycznie).źródło
Dzięki świetnej odpowiedzi @ ronen i mapie dostępna jest prawdziwa moc:
Teraz możliwe jest kierowanie
.myDiv
o wiele więcej zapytań o media typu DRY przy użyciu kilku różnych wartości.Mapa dokumentów: https://sass-lang.com/documentation/functions/map
Przykładowe użycie mapy: https://www.sitepoint.com/using-sass-maps/
źródło
Miałem ten sam problem.
$menu-width
Zmienna powinna być 240 piks na ruchomej widzenia@media only screen and (max-width : 768px)
i 340px na pulpicie widzenia.Więc po prostu utworzyłem dwie zmienne:
A oto jak go użyłem:
źródło
Dwie rekomendacje
1 Napisz swoje „domyślne” instrukcje CSS na małe ekrany i używaj zapytań o media tylko dla większych ekranów. Zwykle nie ma potrzeby
max-width
zapytania o media.Przykład (zakładając, że element ma klasę „kontener”)
2 Użycie zmiennych CSS, aby rozwiązać problem, jeśli to możliwe .
Uwaga:
Ponieważ będzie miał szerokość 1160 pikseli, gdy okno ma szerokość 1170 pikseli, lepiej będzie użyć szerokości 100% i maksymalnej szerokości 1160 pikseli, a element nadrzędny może mieć poziome dopełnienie 5 pikseli, o ile właściwość box-sizing jest ustawiona na border-box. Istnieje wiele sposobów rozwiązania tego problemu. Jeśli rodzic nie jest kontenerem flex lub grid, możesz użyć
.container { margin: auto }
.źródło