Sass Mixins: Utrzymuj swoje arkusze stylów w stanie suchym

Jedną z moich ulubionych zalet korzystania z Sass jest to, że automatyzacja przepływu pracy w projektowaniu front-end jest dziecinnie prosta. Istnieje wiele narzędzi JavaScript do pracy z plikami i automatyzowania innych zadań, ale wbudowane możliwości miksowania Sassa pozwalają na pisanie modułowego kodu w stylu front-endu. W tym artykule wymieniłem dziesięć moich ulubionych mixinów Sass do automatyzacji pisania stylów internetowych.

Są to mixiny Sass, których używam w prawie każdym projekcie internetowym, nad którym pracuję. W sieci jest wiele interesujących artykułów z przydatnymi dodatkami Sass. Istnieje również kilka dobrych bibliotek mixinów Sass, które świetnie nadają się do mniejszych zadań, takich jak Bourbon. Inną świetną biblioteką mixinów, z której wyprowadziłem niektóre z poniższych mixinów, jest Andy.

Mieszanki, które omówię w tym artykule, dotyczą następujących kwestii:

• Zapytania dotyczące mediów
• Motywy kolorystyczne
• Elementy centrujące
• Clearfix
• Spójne rozmiary czcionek
• Przejścia animacji
• Obrazy siatkówki
• Szybkie gradienty
• Czcionki zewnętrzne
• Szybkie dopełnienie/marginesy

Zapytania dotyczące mediów

Zapytania o media umożliwiają łatwe dodawanie niestandardowych punktów przerwania do arkuszy stylów i szybkie dodawanie niestandardowych zachowań responsywnych w elemencie dla różnych punktów przerwania. Jednak zaśmiecanie zapytań o media w arkuszach stylów może szybko stać się przyczyną bólów głowy, zwłaszcza jeśli chodzi o ich utrzymywanie. Dzięki mixinom Sass wszystko może się zmienić.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Po ich zdefiniowaniu mixiny mogą być używane w następujący sposób:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Działa świetnie samodzielnie lub z innymi strukturami siatki, takimi jak Bootstrap.

Instrukcja if wyemituje zapytanie o media dostrojone do określonego rozmiaru ekranu w zależności od nazwy rozmiaru dostarczonej do domieszki. Umożliwi to łatwe dostosowanie zachowania atrybutów CSS. Możesz także dostosować punkt, w którym chcesz dostosować swoje atrybuty CSS. Zazwyczaj najbardziej responsywne układy będą trzymać się 3 lub 4 zdefiniowanych szerokości ekranu, do których można dostosować treść. Różnice w rozmiarach ekranów, urządzeń i aplikacji stale się powiększają, ale istnieje popularny trend, który wielu twórców stron internetowych będzie wykorzystywać do swoich układów; małe rozmiary ekranu dla telefonów, średnie dla tabletów, duże dla laptopów i bardzo duże dla komputerów stacjonarnych.

Dla porównania, punkty multimedialne używane w Bootstrap v3 to:

• max-szerokość: 767px (dowolny ekran o szerokości do 767px)
• min-szerokość: 768px (każdy ekran o szerokości powyżej 768px)
• min-szerokość: 992px (każdy ekran o szerokości większej niż 992px)
• min-szerokość: 1200px (każdy ekran o szerokości powyżej 1200px)

Motywy kolorystyczne

Zdefiniowanie motywu kolorystycznego, który ma być używany w całej witrynie, pozwala oszczędzić czas dzięki temu, że w tych samych elementach HTML znajdują się te same kolorowe fragmenty kodu CSS. Jeśli chcesz, aby wszystkie przyciski div miały jednolitą kropkowaną ramkę o wielkości 1 piksela, możesz łatwo dodać to do swojego motywu. Ten mixin Sass pozwoli Ci ustawić tyle zmiennych kolorów, ile chcesz, i wpłynąć na tyle klas, ile chcesz. Może to być przydatne narzędzie do udostępniania opcji kolorów dla czegoś lub za każdym razem, gdy masz funkcję, która wpływa na kolor wielu elementów naraz. Jest tu świetny artykuł z dodatkowymi informacjami na temat pracy z motywami kolorystycznymi w Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Po skonfigurowaniu głębokiego motywu kolorystycznego wyeliminujesz 70% stylizacji związanych z kolorami, jeśli zostanie to zrobione prawidłowo. Zalecam również oddzielenie tego pliku .scss od innych plików .scss i uwzględnienie wszystkich zmiennych koloru marki w tym samym pliku.

Linia tak prosta jak:

 @include theme(theme-banana, yellow);

wyemituje:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Elementy centrujące

W zależności od układu istnieje wiele różnych sposobów wyśrodkowania elementu w Twoich stylach. Poniższa metoda wykorzystuje pozycjonowanie bezwzględne i pozwala zdefiniować elementy pionowe, poziome lub oba wyśrodkowane. Element nadrzędny będzie musiał mieć pozycję: względną. Pozwala to łatwo zdefiniować wyśrodkowaną pozycję elementu w krótkich 2 liniach kodu.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

Ta mieszanka jest jednym z najbardziej wszechstronnych sposobów wyśrodkowania treści, ale warto zauważyć, że istnieje wiele różnych sposobów wyśrodkowania treści i nie zawsze jest to najlepsze rozwiązanie. W zależności od stylu układu i zgodności z przeglądarką możesz chcieć wyśrodkować zawartość w inny sposób. Flexbox to kolejne popularne i bardzo przydatne narzędzie do wyrównywania, chociaż obecnie nie jest w pełni obsługiwane przez stare przeglądarki. Proste wyrównywanie tekstu i kontenera można łatwo wykonać bez tego domieszki, używając prostych właściwości CSS. Ten pomoże Ci bardziej podczas tworzenia układów i pracy z kontenerami wewnątrz innych kontenerów.

Clearfix

Zastosuj właściwość clearfix css szybko i skutecznie do elementów. W sieci istnieje wiele rozwiązań Clearfix, a to wydaje się działać najlepiej. Jest również łatwy w użyciu po utworzeniu mixinu Sass.

Ta domieszka przyda się, gdy masz zawartość pływającą w prawo lub w lewo i chcesz wyczyścić przestrzeń pod elementem pływającym, aby wstawić nową zawartość poniżej.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Spójne rozmiary czcionek

Ustaw w dokumencie rozmiar czcionki rem, który będzie używany dla wszystkich elementów tekstowych. Jest to lepszy sposób skalowania czcionek w górę iw dół zamiast em. Używanie em będzie się składać na podstawie innych atrybutów CSS, ale rem będzie skalowane w górę lub w dół tylko w zależności od rozmiaru zdefiniowanego w dokumencie HTML. Oddzielenie pliku .scss dla całej typografii i użycie poniższego domieszki do zdefiniowania domyślnych rozmiarów czcionek drastycznie zautomatyzuje proces kodowania typografii.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

Ta mieszanka tworzy również rezerwę pikseli dla przeglądarek, które nie obsługują rem (IE8 i niższe). Gdy przeglądarka nie obsługuje rozmiaru rem, mixin obliczy odpowiednik w pikselach początkowego rozmiaru rem, który ustawisz i wyśle ​​zarówno piksele, jak i wartości rem dla elementu.

Animacja

Szybko zdefiniuj właściwości animacji i dodaj je do swoich elementów. Obecnie właściwość CSS animacji nadal wymaga przedrostków dostawcy, więc to również doda to do miksu.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

Pierwsza część domieszki doda odpowiednie przedrostki dostawcy potrzebne do kompatybilności przeglądarki. Następna sekcja konfiguruje go do wprowadzania niestandardowych ciągów i właściwości. Ostatnia sekcja domieszki to miejsce, w którym tworzysz swoją nazwę domieszki (w tym przypadku: zanikanie) i definiujesz, co chcesz zrobić w każdej klatce kluczowej animacji. Ta przykładowa konfiguracja jest bardzo prosta i możesz dodać zmiany do dowolnego procentu czasu trwania animacji.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

Poniższy przykład przyjmie element docelowy na 0% animacji (początek) i przeniesie właściwość z pełnego krycia (przezroczystość: 1;) do braku krycia i zasadniczo znika (nieprzezroczystość: 0;) na 90% animacji . Więc jeśli ustawię animację na 5-sekundową oś czasu, element zniknie po 4,5 sekundy (90% 5-sekundowej animacji). Ostatnią właściwością, jaką określam w użyciu domieszki („3”), jest liczba powtórzeń animacji.

Obrazy siatkówki

Dodaj do swojej witryny obrazy w wysokiej rozdzielczości z opcją zastępczą dla urządzeń, które nie wyświetlają obrazów w wysokiej rozdzielczości. W przypadku korzystania z obrazów siatkówki zalecałbym możliwie największą kompresję bez niszczenia obrazu. Dobrym narzędziem do tego jest TinyPNG (obsługuje PNG i JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Ten mixin pozwoli Ci dodać regułę w tym samym miejscu, co właściwość CSS definiującą oryginalny obraz.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

Wcześniej jedynym rozwiązaniem CSS było użycie zapytań o media, a to rozwiązanie jest znacznie czystsze i łatwiejsze. Więcej przemyśleń i pomysłów na temat tej mieszanki znajdziesz w tym artykule.

Szybkie gradienty

Z łatwością dodawaj gradienty definiujące tylko kolor początkowy, kolor końcowy i typ gradientu. Dodaj wszystkie właściwości gradientu i możesz wybrać w razie potrzeby. Typ gradientu umożliwia wybór gradientu pionowego, poziomego lub radialnego (w kształcie kuli).

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Nie będziesz już musiał pamiętać różnych prefiksów dostawców i kolejności parametrów w celu implementacji gradientów.

 .foo { @include background-gradient(red, black, 'vertical'); }

Czcionki zewnętrzne

Korzystając z właściwości CSS font-face, możemy łatwo dodawać czcionki do katalogu i uwzględniać wszystkie typy czcionek. Podczas korzystania z plików czcionek różne przeglądarki mają różną zgodność z typami plików. Ta domieszka pomaga rozwiązać ten problem, używając dowolnego odpowiedniego pliku czcionki w katalogu.

Po prostu umieść dowolne pliki czcionek w katalogu i dodaj tag „@include” w swoich stylach, co spowoduje pobranie wszystkich plików z wybranego folderu.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Ta domieszka zajmie się definiowaniem adresów URL alternatywnych formatów czcionek, w tym dziwnych obejść niezbędnych do wstecznej kompatybilności.

Szybkie dopełnienie i marginesy

Głównym powodem, dla którego tego używam, jest to, że pominę określoną właściwość padding, taką jak padding-left czasami i nie chcę jej definiować. Używając właściwości Sass null, możesz pominąć właściwości dopełnienia. Te same zasady dotyczą marż.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

Mieszanie może być następnie użyte do zastąpienia wielu właściwości padding-* i margin-* w Twoich arkuszach stylów. Możesz szybko włączyć ten mixin w dowolnym elemencie i zdefiniować tylko strony dopełnienia/marginesy, które chcesz uwzględnić. Dopełnienie i marginesy to jedne z najczęściej używanych stylów CSS dodawanych do elementów, a taka niewielka oszczędność czasu szybko się zsumuje.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Zakończyć

Używanie mixinów Sass, takich jak te opisane w tym artykule, to świetny sposób na zwiększenie wydajności pracy. Te specyficzne domieszki pomogą Ci spędzać mniej czasu na typowych zadaniach internetowych, dając więcej czasu na skupienie się na innych aspektach projektu, które wymagają bardziej ostrożnego i umiejętnego wglądu.

Instalację i pracę z Sassem można wykonać na wiele sposobów i będzie wymagało użycia wiersza poleceń do zainstalowania niektórych bibliotek w twoim projekcie. Jednym ze sposobów instalacji Sassa jest użycie Ruby – jak opisano na głównej stronie Sass tutaj – a innym popularnym sposobem jest użycie Node.js.

Korzyści płynące z Sass wykraczają poza automatyzację i mogą pomóc w łatwym tworzeniu i zarządzaniu arkuszami stylów projektów. Nawet niektóre z najbardziej podstawowych projektów internetowych mogą mieć tysiące wierszy kodu CSS. Sass to świetny sposób na rozbicie tego kodu na łatwiejsze w zarządzaniu fragmenty, z których każdy ma swój własny cel.