Izrežite SASS: Kako uporabiti vgrajene sloge JavaScript za vse.

Danes je razvoj spletnega mesta namenjen izdelavi aplikacij, ne le spletnih strani. Čeprav sta bila CSS in SASS odlična za oblikovanje strani, nista zelo primerna za aplikacije za oblikovanje. To še posebej velja, če gradite s strategijo na komponentah.

Strategija, ki temelji na komponentah, je ideja, kako vašo aplikacijo razdeliti na majhne gradnike, ki jih je mogoče večkrat uporabiti, imenovane komponente. Uporaba komponent za izdelavo aplikacije vam lahko prinese ponovno uporabo, jasnost in učinkovitost na sprednji strani.

Da bi v celoti izkoristili pristop, ki temelji na komponentah, želimo komponente, ki v celoti zajemajo funkcijo, označevanje in sloge.

V tej objavi bomo raziskali, kako je pisanje slogov z vgrajenim JavaScript odličen način za podporo komponentnemu razvoju. Na koncu bomo s komponentami sprednjega dela, ki so enotna datoteka, lahko delljiva in popolnoma samostojna.

Pisanje stilov v JS je velika sprememba, zato si želim vzeti nekaj časa, da razložim, zakaj bi to radi storili. Verjamem v izbiro pravega orodja za pravo delo. SASS je bil zagotovo pravo orodje za svoj čas, saj je zagotovil nekaj velikih prednosti, kot so:

  • Gnezdenje
  • Spremenljivke
  • Mixins

Gnezdenje je bilo v veliko korist, saj je omogočilo, da vaši slogi odražajo vašo oznako. Če bi imeli:

Lahko bi naredili:

Ta ugodnost ni več tako koristna. Še vedno nas zelo zanima, če se naši slogi zrcalijo, vendar se je naša oznaka spremenila!

Danes s pomočjo pristopa, ki temelji na komponentah, jih raje ločimo na dve različni komponenti, imenovani `UserList` in` User`. Rezultat je dveh datotek, kjer bi "UserList" vseboval ponavljajoč se niz "User".

Ker razdelimo svojo aplikacijo na komponente, bi morali pisati svoje sloge z isto strategijo. To pomeni, da bi morali poskusiti locirati svoje sloge z oznako naše komponente, tako da bodo skupaj zapečateni.

Eden od načinov za dosego tega je uporaba linijskih stilov, kot so bili stari časi pred kaskadnimi tablicami sloga.

Ta klasična metoda je zelo dobro usklajena s komponentnim pristopom. Ne bomo ga uporabljali, ker je zelo omejujoč, vendar prikazuje načela, ki jih iščemo v sodobni oblikovalski rešitvi.

Spremenljivke in mešanice

Govorili smo o gnezditvi SASS, kaj pa o drugih velikih prednostih - spremenljivkah in mešanicah?

No, tako se zgodi, da obstaja še ena precej priljubljena rešitev za te - JavaScript!

Ali ne bi bilo čudovito, če bi lahko izkoristili JavaScript-ove naravne lastnosti za "var" in "funkcijo", da bi nam dali tisto, kar potrebujemo v oblikovalski rešitvi? Če za pisanje svojih slogov uporabljamo JavaScript, pridobimo fleksibilnost, moč in domačnost, ki jo imamo radi pri JS. Plus! Celotno našo komponento je mogoče sestaviti v enem samem jeziku! In celo eno datoteko!

Naši cilji

Evo, kaj želimo storiti:

  • Sestavite naše sloge neposredno ob označevanju
  • spremenljivke uvoz in izvoz, kot so barve ali točke preloma
  • Napišite "dinamične" sloge glede na stanje (odprt / zaprt meni itd.)

Tu je še nekaj zahtev:

  • Potrebuje pokritje psevdostavk, kot je:: hover,: prej,: after`
  • Neposredno mora podpirati medijske poizvedbe, kot je `@media (največja širina: 600 px)`
  • Dovoli funkcije / ternerje (glej dinamiko zgoraj)

Stranska opomba: razlaga razlike med "JS slogi" in "CSS v JS"

Obstajata dva različna pristopa:

  • CSS lahko vključite v svoj JS
  • CSS lahko napišete s pomočjo JS

Všeč mi je drugi način in to je tisto, kar bomo zajeli tukaj.

Za prvi pristop so moduli CSS priljubljena rešitev v kategoriji "napiši CSS v svoj JS". Obsega območje ali presledke imen, navadni CSS, ki ga napišete v komponento `

`. Razmestitev imena je nekaj, kar lahko ročno naredite z razredi ali ID-ji, in ni dovolj razloga, da uporabite kaj takega sami. Za spremenljivo podporo ali mixins morate uporabiti ojačevalnik CSS, kot je PostCSS ali SASS z moduli CSS.

Spet želimo imeti možnost uporabe JavaScript za jezikovne funkcije, vključno s spremenljivkami, ternarji ali funkcijami. Če nas rešitev prisili, da namesto JS pišemo nekakšen "izboljšani" CSS, to ne bo delovalo za naše potrebe.

Za oba pristopa je na voljo veliko rešitev css-in-js. Oglejte si jih! Za zdaj bomo izvajali, kar se mi je zdelo najbolje, da rešimo naše cilje in zahteve.

Začnimo!

Uporabljali bomo:

  • ES6 preoblikoval Babel
  • Reagirajte, da naredimo našo oznako
  • Afrodita za ustvarjanje CSS iz JS pišemo.

Najprej bomo ustvarili preprosto komponento, imenovano UserMenu. Imela bo malo uporabniškega avatarja in meni, ki se spusti navzdol, ko ga kliknete.

Uporabite ga lahko na svoji strani aplikacije kot:

Oznaka ni pomembna. To je samo osnovni React ali celo AngularJS z malo sintakse funkcionalnih komponent ES6 / brez stanja.

Začnimo s stylingom! Začnite z vključitvijo Afrodite.

Tukaj uvažamo posebne funkcije, ki jih potrebujemo od Afrodite po navodilih dokumentov.

Opomba pri uvozu: Uvozimo posebne reference s sintakso 'import {bar} iz' foo '. Preberite več o uvozni dokumentaciji MDN

Zdaj smo napisali `const stile` in uporabljali` StyleSheet.create () `s predmetom naših stilov znotraj. To izhaja iz dokumentacije o Afroditi. Afrodita v svoj dokument vbrizga oznako