9 bibliotek Mixin dla projektantów Sass powinni się dostać
Jeśli używasz Sass w swoim procesie rozwoju, wiesz, jak ważne są miksy. Kiedy widzisz jakieś rzeczy, które są napisane wielokrotnie i żmudnie w CSS, to tam miks może pomóc zapobiec powtarzalnej pracy. Mixin zawiera deklaracje CSS, które można ponownie wykorzystać w całej witrynie.
Programiści tworzą wiele miksów, które pomogą ci w pracy z Sass w twoim rozwoju. Większość obejmuje rzeczy, które często powtarzają się w CSS. Z dostosowanie do wielu przeglądarek do tworzenie przycisków, animacji i efektów przejścia, znajdź to i więcej w następujących 11 bibliotekach mieszanych, które powinieneś uzyskać dla swojego rozwoju Sass.
1. Burbon
Bourbon to biblioteka Sass, która zawiera mixin, funkcje i dodatki, które pozwalają uprościć tworzenie arkuszy stylów dla różnych przeglądarek. Dla mnie jest to najwspanialszy mixin Sassa. Zawiera prawie wszystko, czego potrzebujesz, aby stylizować witrynę, zachowując lekkość arkusza stylów.
Sprawdź pełną dokumentację, aby skorzystać z każdej dostępnej opcji i funkcji.
2. Sass CSS3 Mixins
Sass CSS3 Mixins zapewniają miksy, które działają w różnych przeglądarkach. Znajdziesz tu kilka najlepszych praktyk, takich jak tło, obramowanie, pole, kolumna, czcionka, transformacja, przejście i animacja. To wystarcza na potrzeby stylizacji. Aby użyć, zaimportuj css3-mixins.scss i wywołaj mixin w swojej klasie CSS.
Pobierz ten miks tutaj.
3. CssOwl
CssOwl dostarcza użytecznych miksów do ustawiania pozycji elementu (względnego lub bezwzględnego) i dodawania treści za pomocą pseudo selektora ( :po i :przed). Pomaga również, gdy chcesz utworzyć elementy sprite: mixin daje elastyczność, aby ustawić pozycję obrazu w ikonce. Oprócz Sassa biblioteka miksów CssOwl jest również dostępna dla LESS i Stylus.
4. Punkt przerwania Sass
Breakpoint ułatwia wykonywanie zapytań w mediach za pośrednictwem Sass. Za pomocą punktu przerwania możesz tworzyć zmienne i nadawać im wartość definiującą min-width lub max-width zapytań o media. Ponieważ utworzona zmienna ma znaczącą nazwę, możesz ją łatwo wywołać w Sassie.
5. Scut
Scut zawiera zestaw miksów, symboli zastępczych, funkcji i zmiennych wielokrotnego użytku Sass, które pomagają łatwo zaimplementować popularne wzorce kodu stylu. Udostępnia kod najlepszej praktyki do tworzenia elementów internetowych, takich jak układy stron i typografia stylizacji. Możesz zmniejszyć liczbę powtórzeń podczas pisania kodu, częściej wykorzystując kod. W ten sposób pomagasz się bardziej zorganizować w tym procesie.
6. Szafran
Dzięki Saffron możesz z łatwością dodawać animacje i przejścia CSS3. Dostępnych jest kilkanaście animacji i przejść, w tym wejścia / wyjścia, wysuwanie / wysuwanie, zwiększanie / zmniejszanie, a także różne efekty, takie jak wstrząsanie, teeter, odbijanie i inne. Aby użyć Saffron, po prostu włącz miks w deklaracji Sass i wywołaj nazwę efektu w swojej klasie CSS. Możesz zdobyć Saffron, instalując go za pomocą Bower lub Gem, lub po prostu pobrać go ręcznie z Github.
7. Wpisz ustawienia
TypeSettings to rodzaj zestawu narzędzi dla Sass. Ustawi rozmiar czcionki w skali modułowej za pomocą em (zamiast rems lub pikseli), pionowego rytmu i nagłówków odpowiadających proporcji. Możesz także zainstalować ten z Bower, pobrać wydanie lub sklonować repo. Aby uzyskać więcej informacji, sprawdź jego stronę.
8. Linia Sass
Sass Line to miks Sass, który pomaga tworzyć lepszą typografię. Używa jednostki rems na czcionce, dzięki czemu można ją przetwarzać proporcjonalnie z siatki linii bazowej. Sass Line wykorzystuje precyzyjny pionowy rytm oparty na siatce linii bazowej i pozwala ustawić skalę modułową dla każdego punktu przerwania, aby uzyskać dobre proporcje we wszystkich aspektach witryny.
Przejdź tutaj, aby uzyskać więcej informacji na temat korzystania z niego.
9. Andy.scss
Andy.scss to zbiór przydatnych miksów Sass, zaprojektowanych z myślą o łatwym rozwijaniu wyglądu witryny przy jednoczesnym zachowaniu jej lekkości. Dostępne są dziesiątki miksów Sass, od tła po animacje. Prawie wszystkie powszechnie używane właściwości CSS są tutaj opisane. Zdobądź to w Github.
Więcej postów na Sass:
- Pierwsze kroki z Sass
- Kopanie w Sass
- Jak skompilować Sassa z wysublimowanym tekstem
- Korzystanie z Bootstrap 3 z Sass
- Jak zbudować wizytówkę online z Sass i kompasem
- Porównanie preprocesorów CSS: Vs Sass. MNIEJ
- Syntaktycznie niesamowite arkusze stylów: Używanie kompasu w Sassie
- Jak konwertować CSS do Sass i SCSS
