Wytnij SASS: jak używać wbudowanych stylów JavaScript do wszystkiego.

Obecnie tworzenie stron internetowych polega na tworzeniu aplikacji, a nie tylko stron internetowych. I chociaż zarówno CSS, jak i SASS świetnie nadają się do stylizacji stron, nie nadają się do stylizacji. Jest to szczególnie prawdziwe, jeśli budujesz ze strategią opartą na komponentach.

Strategia oparta na komponentach polega na rozbiciu aplikacji na małe bloki konstrukcyjne wielokrotnego użytku zwane komponentami. Wykorzystanie komponentów do zbudowania aplikacji może zapewnić możliwość ponownego użycia, przejrzystość i wydajność interfejsu użytkownika.

Aby uzyskać pełne korzyści z podejścia opartego na komponentach, chcemy komponentów, które w pełni zawierają funkcje, znaczniki i style.

W tym poście dowiemy się, w jaki sposób pisanie stylów za pomocą wbudowanego JavaScript jest świetnym sposobem wspierania rozwoju opartego na komponentach. Ostatecznie otrzymamy komponenty frontonu, które są pojedynczym plikiem, łatwym do współużytkowania i całkowicie samodzielnym.

Pisanie swoich stylów w JS to duża zmiana, więc chcę poświęcić trochę czasu, aby wyjaśnić, dlaczego chcemy to zrobić. Wierzę w wybór odpowiedniego narzędzia do właściwej pracy. SASS był z pewnością odpowiednim narzędziem na tamte czasy, oferując wspaniałe korzyści, takie jak:

  • Zagnieżdżanie
  • Zmienne
  • Mixiny

Zagnieżdżanie było dużą zaletą, ponieważ pozwoliło na odzwierciedlenie twoich stylów. Gdybyś miał:

Mógłbyś:

Ta korzyść nie jest już tak przydatna. Nadal jesteśmy bardzo zainteresowani tym, aby nasze style odzwierciedlały nasz znacznik, ale nasz znacznik się zmienił!

Dzisiaj, stosując podejście oparte na komponentach, wolimy rozdzielić je na dwa odrębne komponenty o nazwie „UserList” i „User”. Wynikiem są dwa pliki, w których `UserList` zawierałby powtarzającą się serię` User`.

Ponieważ dzielimy naszą aplikację na komponenty, powinniśmy pisać nasze style przy użyciu tej samej strategii. Oznacza to, że powinniśmy starać się lokalizować nasze style ze znacznikami naszego komponentu, aby były razem zamknięte.

Jednym ze sposobów na osiągnięcie tego jest użycie stylów wbudowanych, takich jak dawne czasy przed kaskadowymi arkuszami stylów.

Ta klasyczna metoda jest bardzo dobrze dostosowana do podejścia opartego na komponentach. Nie będziemy go używać, ponieważ jest to bardzo ograniczone, ale pokazuje zasady, których szukamy w nowoczesnym stylu.

Zmienne i mieszanki

Rozmawialiśmy o zagnieżdżaniu SASS, a co z innymi dużymi zaletami - zmiennymi i mixinami?

Tak się składa, że ​​istnieje dla nich inne dość popularne rozwiązanie - JavaScript!

Czy nie byłoby wspaniale, gdybyśmy mogli wykorzystać naturalne funkcje JavaScript dla `var` i` function`, aby dać nam to, czego potrzebujemy w rozwiązaniu do stylizacji? Używając JavaScript do pisania naszych stylów, zyskujemy elastyczność, moc i znajomość, którą kochamy w JS. Plus! Cały nasz komponent może być skomponowany w jednym języku! A nawet pojedynczy plik!

Nasze cele

Oto, co chcemy zrobić:

  • Komponuj nasze style bezpośrednio obok znaczników
  • Zmienne `import` i` export`, takie jak kolory lub punkty przerwania
  • Napisz style „dynamiczne” na podstawie stanu (menu otwarte / zamknięte itp.)

Oto kilka innych wymagań:

  • Musi obejmować pseudo stany, takie jak `: hover,: before,: after`
  • Musi bezpośrednio obsługiwać zapytania o media, takie jak `@media (max-width: 600px)`
  • Zezwalaj na funkcje / trójki (patrz dynamiczny, powyżej)

Uwaga dodatkowa: wyjaśnienie różnicy między „stylami JS” a „CSS w JS”

Istnieją dwa różne podejścia:

  • Możesz dołączyć CSS do swojego JS
  • Możesz napisać swój CSS używając JS

Wolę drugą metodę i to właśnie tutaj omówimy.

W przypadku pierwszego podejścia moduły CSS są popularnym rozwiązaniem w kategorii „Napisz CSS w swoim JS”. Obejmuje zakresy lub przestrzenie nazw zwykły CSS, który piszesz do komponentu `

`. Odstępy między nazwami to czynności, które można wykonać ręcznie za pomocą klas lub identyfikatorów, i to nie wystarczający powód, aby używać czegoś takiego sam. Aby obsługiwać zmienne lub miksy, musisz użyć „wzmacniacza” CSS, takiego jak PostCSS lub SASS z modułami CSS.

Znowu chcemy móc wykorzystywać JavaScript w funkcjach językowych, w tym zmiennych, trójskładnikach lub funkcjach. Jeśli nasze rozwiązanie zmusi nas do napisania jakiegoś „ulepszonego” CSS zamiast JS, nie zadziała dla naszych potrzeb.

Istnieje wiele rozwiązań css-in-js dostępnych dla obu podejść. Sprawdź je! Na razie zamierzamy wdrożyć to, co według mnie działa najlepiej, aby rozwiązać nasze cele i wymagania.

Zacznijmy!

Będziemy używać:

  • ES6 przekształcony przez Babel
  • Reaguj, aby renderować nasze znaczniki
  • Afrodyta do tworzenia CSS z JS piszemy.

Najpierw stworzymy prosty składnik o nazwie UserMenu. Będzie miał mały awatar użytkownika oraz menu rozwijane po kliknięciu.

Możesz go użyć na stronie aplikacji, np .:

Znaczniki nie są ważne. Jest to tylko podstawowa React lub nawet AngularJS z niewielką składnią komponentów funkcjonalnych ES6 / bezpaństwowych.

Zacznijmy stylizować! Zacznij od włączenia Afrodyty.

Tutaj importujemy określone funkcje, których potrzebujemy z Afrodyty, zgodnie z instrukcją.

Uwaga na temat importowania: importujemy określone referencje za pomocą „import {bar} ze składni„ foo ”. Przeczytaj więcej na temat dokumentacji importowej MDN

Teraz napisaliśmy „const styles” i używamy „StyleSheet.create ()` z naszym stylem wewnątrz obiektu. Pochodzi z dokumentacji Afrodyty. Afrodyta wstrzykuje znacznik `