Mixiny w CSS jako sposób na prostsze tworzenie responsywnych stron WWW

Większość ruchu na dzisiejszych stronach internetowych pochodzi z urządzeń mobilnych. Ich twórcy skupiają się coraz bardziej na aspekcie RWD, stosując różne podejścia na etapie kodowania. Cel jest jednak jeden – umożliwić użytkownikom telefonów oraz tabletów prosty, a zarazem szybki dostęp do treści znajdujących się na serwisie webowym. Dzisiaj dowiesz się, czym są mixiny w CSS i co możesz zyskać używając ich.

Strona internetowa w najprostszej swojej formie zbudowana jest z kodu HTML oraz CSS, a w znakomitej większości również z JavaScript. To pozwala nam zbudować warstwę zwaną front-endem, czyli mówiąc prostym językiem to, co widzi użytkownik. I na tej warstwie skupimy się w tym artykule.

Style CSS można pisać w wielu różnych formatach – bezpośrednio pisząc sam CSS, albo używając między innymi preprocesorów SASS bądź SCSS. Są to rozszerzenia CSS dające developerom więcej możliwości takich, jak:

• zagnieżdżanie składni,
• funkcje matematyczne,
• zmienne pozwalające używać tych samych wartości w wielu miejscach,
• mixiny w CSS, czyli możliwość tworzenia własnych funkcji wykonujących skomplikowane operacje.

Korzystając z preprocesorów, potrzebny jest etap komplikacji, który zamieni ten kod do postaci kodu CSS. Ten dopiero jest interpretowany przez przeglądarki. Taka komplikacja może odbywać się przy wykorzystaniu różnych narzędzi, a jednymi z najpopularniejszych są Webpack oraz Gulp. Takie podejście do pisania kodu CSS w znaczącym stopniu ułatwia prace i daje opcje, aby ją jeszcze bardziej uprościć.

Style CSS i RWD

Pisząc style dla kodu HTML dostępne mamy dwa główne podejścia – albo zaczynamy od tworzenia strony w wersji desktopowej, a następnie modyfikujemy style dla mniejszych rozdzielczości, albo odwrotnie. To zależy głównie od tego, na jakich projektach graficznych bazujemy oraz od osobistych preferencji.

Wyobraźmy sobie sytuację, w której mamy sekcję, a w niej elementy. Chcielibyśmy, aby były one łożone w 4 kolumnach. W tym celu należy napisać tego typu kod SASS:

.section {
	display: flex;

	&__item {
		width: 25%;
	}
}

Po skompilowaniu powyższy kod daje następujący kod CSS:

.section {
	display: flex;
}

.section__item {
	width: 25%;
}

Przy takim założeniu te elementy zawsze, bez względu na urządzenie, miałyby szerokość 25%. To jednak kłóci się z ideą responsywności. Dlatego właśnie w przypadku wersji na tablet chcielibyśmy, aby element miał 50% szerokości, a na telefonach komórkowych 100%. Można to zrobić mniej więcej tak:

.section {
	display: flex;

	&__item {
		width: 25%;
	}
}

@media (max-width: 1024px) {

	.section {
	
		&__item {
			width: 50%;
		}
	}
}

@media (max-width: 480px) {

	.section {
	
		&__item {
			width: 100%;
		}
	}
}

Podejścia do tematu RWD są różne. W dużej liczbie przypadków takowy kod znajduje się na dole pliku, bądź też w osobnym. Można także Media Queries zagnieżdżać bezpośrednio w kodzie, ale w takiej sytuacji tracimy istotną zaletę w postaci jego spójności na przestrzeni całego projektu.

Mixiny w CSS – jak ułatwić wdrażanie RWD?

Poniższy przykład obrazuje, jak proste może być nadpisywanie stylów CSS na różnych urządzeniach:

.section {
	display: flex;

	&__item {
		width: 25%;

		@include rwd("large-tablet") {
			width: 50%;
		}

		@include rwd("large-phone") {
			width: 100%;
		}
	}
}

Czyż nie jest to rozwiązanie o wiele łatwiejsze? W jednym miejscu znajdują się zarówno bazowe style dla elementu, jak i również style, które nadpisują je na innych rozdzielczościach. Nie ma już potrzeby przeskakiwania na dół pliku, bądź też szukania stylów w innych plikach. Takie podejście przyspiesza naszą pracę oraz ją ułatwia, ponieważ nawet osoba przejmująca projekt, nie zapomni o stylach, które mogłyby się znajdować w innych miejscach, w katalogu z projektem.

Dodatkową cenną korzyścią jest także spójność w obrębie całego tworzonego serwisu. Deklarując na początkowym etapie prac zestaw breakpointów, potem tylko są one wykorzystywane w miarę potrzeb. Pozwala to stworzyć powtarzalne zachowanie wszystkich elementów na stronie. To natomiast jest istotne, gdy nad projektem pracuje więcej niż jedna osoba, bądź też gdy wracamy do projektu po czasie. Nie musimy sobie wtedy zadawać pytania “co autor miał na myśli?”.

W jaki sposób korzystać z takiego rozwiązania? Jest to bardzo proste. W tym celu należy dodać następujący mixin, do swojego kodu SASS. W artykule o ITCSS znajdziesz więcej informacji o dobrych praktykach podczas tworzenia struktury plików CSS. Tego typu mixin powinien się znaleźć w warstwie “tools”, stosując tę architekturę:

$breakpoints: (
	"phone" : "(max-width: 360px)",
	"large-phone" : "(max-width: 480px)",
	"small-tablet" : "(max-width: 600px)",
	"tablet" : "(max-width: 768px)",
	"large-tablet" : "(max-width: 1024px)",
	"laptop" : "(max-width: 1280px)",
	"large-laptop" : "(max-width: 1366px)",
	"ultra" : "(max-width: 1600px)",
);

@mixin rwd($breakpoint) {

	@if map-has-key($breakpoints, $breakpoint) {

		@media #{(map-get($breakpoints, $breakpoint))} {
			@content;
		}

	} @else {

		@warn "Unfortunately, not found breakpoint called `#{$breakpoint}`!";

	}
}

W powyższym przykładzie nie ma znaczenia, czy stosujemy podejście desktop first, czy mobile first. Nie jest istotne także, jakie breakpointy na swojej stronie uznasz za stosowne. Dzięki zastosowaniu tablicy z wartościami to rozwiązanie staje się elastyczne i w pełni konfigurowalne dla każdego użytkownika.

Jeżeli coś w naszej pracy jest wielokrotnie powtarzalne i zajmuje określoną ilość czasu, to zmniejszając czas potrzebny na taką operację, finalnie oszczędzamy sporo czasu. Mixiny to proste, choć bardzo potężne narzędzie w rękach każdego developera, bez względu na jego doświadczenie czy poziom skomplikowania projektu.

Co sądzisz o takim rozwiązaniu? Czy uważasz, że może ono ułatwić Twoją pracę? W jaki sposób obecnie radzisz sobie z pisaniem kodu CSS oraz tworzeniem responsywnych stron internetowych przy jego użyciu? Podziel się swoimi spostrzeżeniami w komentarzu poniżej.