Ilustracja Nicka miała trzy różne warstwy na głowy. To tylko nieco inne wariacje. Moglibyśmy zamienić obrazy na animację, JavaScript lub coś w tym stylu, ale posiadanie zawsze działającej animacji (lub nawet takiej, która uruchamia się przy każdym wczytywaniu strony) byłoby prawdopodobnie mega irytujące dla ciężkich użytkowników forów. Zamiast tego zrobimy z niego jajko wielkanocne, czyli małą funkcję, której możesz nie zauważyć, chyba że przypadkowo się na nią natkniesz.
To, co zrobimy, to zamienianie obrazów, gdy okno przeglądarki zmieni rozmiar poprzez zapytania @media. Zamiast tylko kilku zapytań @media, które kilka razy zmieniłyby głowy, zrobimy kupę zapytań @media, które zmieniają je co kilka pikseli. Zasadniczo przekazywanie ducha „Lark Queries” Arleya McBlaina.
Używamy pętli Sass do tworzenia wielu zapytań @media, których potrzebujemy. Ostatecznie:
@for $i from 25 through 125 ( @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-2.png.webp); ) ) @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-3.png.webp); ) ) )Fajne w tym jest to, że nie ładujemy tych dodatkowych obrazów, chyba że strona zmienia rozmiar, więc nie ładujemy dodatkowych rzeczy tylko dla pisanki.