Lõika SASS: kuidas kasutada JavaScripti-sisest stiile kõige jaoks.

Täna hõlmab veebiserveri arendus rakenduste, mitte ainult veebilehtede loomist. Ja kuigi CSS ja SASS olid mõlemad suurepärased lehtede kujundamiseks, ei sobi need stiilirakenduste jaoks hästi. See kehtib eriti juhul, kui ehitate komponendipõhise strateegia abil.

Komponendipõhine strateegia on idee jaotada oma rakendus väikesteks korduvkasutatavateks ehitusplokkideks, mida nimetatakse komponentideks. Komponentide kasutamine rakenduse loomiseks võib teie esiplaanile anda korduvkasutatavuse, selguse ja tõhususe.

Komponendipõhisest lähenemisest täieliku kasu saamiseks tahame komponente, mis sisaldavad täielikult funktsiooni, märgistusi ja stiile.

Selles postituses uurime, kuidas stiilisisest JavaScripti kasutades kirjutamisstiil on suurepärane viis komponendipõhise arengu toetamiseks. Lõpuks jõuame lõppkasutuskomponentidesse, mis on üks fail, hõlpsasti jagatav ja täielikult iseseisvad.

JS-is oma stiilide kirjutamine on suur muudatus, nii et tahan veidi aega selgitada, miks me seda teha tahaksime. Usun, et valin õige töö jaoks õige tööriista. SASS oli kindlasti oma aja jaoks õige tööriist, pakkudes selliseid suurepäraseid eeliseid nagu:

  • Pesitsevad
  • Muutujad
  • Mixins

Pesastamine oli suur eelis, sest see võimaldas teie stiilidel kajastada teie juurdehindlust. Kui teil oleks:

Sa võid teha:

See eelis pole enam nii kasulik. Oleme endiselt väga huvitatud sellest, et meie stiilid kajastaksid meie märgistusi, kuid meie märgistused on muutunud!

Täna eelistame komponentpõhist lähenemisviisi kasutades jagada need kaheks eraldi komponendiks, mida nimetatakse kasutajaloendiks ja kasutajaks. Tulemuseks on kaks faili, kus "UserList" sisaldaks korduvat sarja "Kasutaja".

Kuna me jagame oma rakenduse osadeks, peaksime oma strateegiad kirjutama sama strateegia abil. See tähendab, et peaksime proovima oma stiile oma komponendi märgistusega ühiselt leida, et need kapseldataks koos.

Üks viis selle saavutamiseks on kasutada tekstisiseseid stiile, nagu vanasti enne Cascading Style Sheetsi.

See klassikaline meetod on komponendipõhise lähenemisega väga hästi joondatud. Me ei kasuta seda, kuna see on väga piirav, kuid see näitab põhimõtteid, mida otsime kaasaegses stiililahenduses.

Muutujad ja miksiinid

Oleme rääkinud SASS-i pesitsemisest, mis saab muudest suurtest eelistest - muutujatest ja segudest?

Noh, lihtsalt nii juhtub, et nende jaoks on olemas veel üks üsna populaarne lahendus - JavaScript!

Kas poleks tore, kui saaksime JavaScripti loomulikke funktsioone var- ja funktsioonifunktsioonidele kasutada, et anda meile stiililahenduses seda, mida vajame? Kui kasutame oma stiilide kirjutamiseks JavaScripti, saavutame JSi suhtes paindlikkuse, jõu ja tuttavuse, mida me armastame. Pluss! Kogu meie komponent võib olla koostatud ühes keeles! Ja isegi üks fail!

Meie eesmärgid

Me soovime teha järgmist:

  • Koostage meie stiilid otse märgistuse kõrval
  • impordi ja ekspordi muutujad, näiteks värvid või murdepunktid
  • Kirjutage oleku põhjal dünaamilisi stiile (avatud / suletud menüü jne)

Siin on veel mõned nõuded:

  • Vaja on katta selliseid pseudo-olekuid nagu:: hõljutage,: enne, pärast:
  • Peab otseselt toetama meediumipäringuid nagu `@media (max laius: 600 pikslit)`
  • Luba funktsioone / ternaare (vt ülal dünaamilisi)

Külgmärkus: JS-stiilide ja JS-i CSS-i erinevuse selgitamine

On kaks erinevat lähenemist:

  • Võite oma CS-i lisada CSS-i
  • CSS-i saate kirjutada JS-i abil

Ma eelistan teist meetodit ja see on see, mida me siin käsitleme.

Esimese lähenemisviisi jaoks on CSS-moodulid populaarseks lahenduseks kategoorias „Kirjutage CSS oma JS-is”. Selle ulatus või nimeruumid on tavaline CSS, mille kirjutate komponendile

. Nimevahed on midagi, mida saate klasside või ID-dega käsitsi teha, ja see pole piisav põhjus, et midagi sellist üksi kasutada. Muutuva toe või segude jaoks peate kasutama CSS-i "täiustajat" nagu PostCSS või SASS koos CSS-moodulitega.

Jällegi tahame, et saaksime JavaScripti kasutada keelefunktsioonide, sealhulgas muutujate, kolmekomponentide või funktsioonide jaoks. Kui meie lahendus sunnib meid kirjutama JS-i asemel mingit „täiustatud” CSS-i, siis see ei tööta meie vajaduste jaoks.

Mõlema lähenemisviisi jaoks on saadaval palju css-in-js lahendusi. Vaata neid! Praegu rakendame meie eesmärkide ja nõuete lahendamiseks seda, mis minu arvates kõige paremini sobib.

Alustame!

Kasutame:

  • ES6 muutis Babel
  • Reageerige meie juurdehindlus
  • Aphrodite luua CSS JS me kirjutame.

Esiteks loome lihtsa komponendi, mille nimi on UserMenu. Sellel on väike kasutaja avatari ja menüü, mis klõpsab sellel klõpsates.

Saate seda oma rakenduse lehel kasutada näiteks järgmiselt:

Märgistus pole oluline. See on lihtsalt põhiline React või isegi AngularJS vähese ES6 / kodakondsuseta funktsionaalsete komponentide süntaksiga.

Alustame stiilimist! Alustage Aphrodite kaasamisega.

Siin impordime Aphroditeelt konkreetseid funktsioone, mida dokumendid juhendavad.

Märkused impordi kohta: impordime konkreetseid viiteid rakendusega `import {bar} süntaksist foo. Lisateavet leiate MDN-i impordidokumentide kohta

Nüüd oleme kirjutanud "const stiile" ja kasutame "StyleSheet.create ()" koos meie stiiliobjektiga. See on Aphrodite dokumentatsioonist. Aphrodite süstib dokumendile sildi