Izgrieziet SASS: Kā visam izmantot iestrādātos JavaScript stilus.

Mūsdienās priekšējā Web attīstība ir paredzēta ne tikai tīmekļa lapu, bet arī lietojumprogrammu veidošanai. Un, lai gan CSS un SASS bija lieliski piemēroti lapu veidošanai, tie nav labi piemēroti veidošanas lietojumprogrammām. Tas jo īpaši attiecas uz stratēģiju, kuras pamatā ir komponenti.

Uz komponentiem balstīta stratēģija ir ideja sadalīt jūsu lietojumu mazos, atkārtoti lietojamos celtniecības blokos, ko sauc par komponentiem. Izmantojot komponentus, lai izveidotu lietotni, jūsu priekšpusē var panākt atkārtotu izmantojamību, skaidrību un efektivitāti.

Lai pilnībā gūtu labumu no uz komponentiem balstītas pieejas, mēs vēlamies komponentus, kas pilnībā iekļauj funkciju, marķējumu un stilus.

Šajā rakstā mēs izpētīsim, kā rakstīšanas stili, izmantojot iebūvētu JavaScript, ir lielisks veids, kā atbalstīt uz komponentiem balstītu attīstību. Rezultātā mēs galu galā nonāksim pie priekšējiem komponentiem, kas ir viens fails, viegli koplietojami un pilnībā autonomi.

Jūsu stilu rakstīšana JS ir lielas pārmaiņas, tāpēc es vēlos veltīt laiku, lai izskaidrotu, kāpēc mēs to vēlamies darīt. Es ticu pareizā darba instrumenta izvēlei. SASS savā laikā noteikti bija pareizais rīks, kas nodrošināja dažas lielas priekšrocības, piemēram:

  • Ligzdošana
  • Mainīgie
  • Miksins

Ligzdošanas bija liels ieguvums, jo tas ļāva jūsu stiliem atspoguļot jūsu uzcenojumu. Ja jums būtu:

Jūs varētu darīt:

Šis ieguvums vairs nav tik noderīgs. Mēs joprojām esam ļoti ieinteresēti, lai mūsu stili atspoguļotu mūsu iezīmējumu, bet mūsu iezīmējums ir mainījies!

Mūsdienās, izmantojot uz komponentiem balstītu pieeju, mēs dodam priekšroku sadalīt tos divās atšķirīgās sastāvdaļās, kuras sauc par `UserList` un` User`. Rezultātā tiek iegūti divi faili, kuros `UserList` būtu atkārtotas` User` sērijas.

Tā kā mēs sadalām mūsu lietojumprogrammas komponentos, mums būtu jāraksta savi stili, izmantojot to pašu stratēģiju. Tas nozīmē, ka mums jācenšas vienlaicīgi atrast mūsu stilus ar mūsu komponenta marķējumu, lai tie būtu iekapsulēti.

Viens veids, kā to panākt, ir izmantot inline stilus, piemēram, senos laikos pirms Cascading Style Sheets.

Šī klasiskā metode ir ļoti labi saskaņota ar uz komponentiem balstītu pieeju. Mēs to neizmantojam, jo ​​tas ir ļoti ierobežojošs, taču tas parāda principus, kurus mēs meklējam modernā stila risinājumā.

Mainīgie un Mixins

Mēs esam runājuši par SASS ligzdošanu, kā ir ar citiem lielajiem ieguvumiem - mainīgajiem un maisījumiem?

Nu tas tā notiek, ka tiem pastāv vēl viens diezgan populārs risinājums - JavaScript!

Vai nebūtu lieliski, ja mēs varētu izmantot JavaScript dabiskās funkcijas “var” un “function”, lai sniegtu mums to, kas mums nepieciešams veidošanas risinājumā? Ja savu stilu rakstīšanai izmantojam JavaScript, mēs iegūstam elastību, jaudu un pazīstamību, kas mums patīk JS. Plus! Visu mūsu komponentu var sastādīt vienā valodā! Un pat viens fails!

Mūsu mērķi

Lūk, ko mēs vēlamies darīt:

  • Komponējiet mūsu stilus tieši līdzās atzīmēm
  • "importa" un "eksporta" mainīgie, piemēram, krāsas vai robežpunkti
  • Rakstiet “dinamiskos” stilus, pamatojoties uz stāvokli (atvērta / aizvērta izvēlne utt.)

Šeit ir vēl dažas prasības:

  • Nepieciešams aptvert tādus pseido stāvokļus kā `: lidināties,: pirms,: pēc`
  • Tieši jāatbalsta tādi multivides vaicājumi kā `@media (maksimālais platums: 600 pikseļi )`
  • Atļaut funkcijas / trīskāršus parametrus (skat. Iepriekš dinamisko)

Blakuspiezīme: atšķirības starp “JS stili” un “CSS JS” skaidrojums

Pastāv divas atšķirīgas pieejas:

  • Jūs varat iekļaut CSS savā JS
  • Jūs varat uzrakstīt savu CSS, izmantojot JS

Es dodu priekšroku otrajai metodei, un to mēs šeit apskatīsim.

Pirmajai pieejai CSS moduļi ir populārs risinājums kategorijā “ierakstiet CSS savā JS”. Tās darbības joma vai atstarpes ir parastajai CSS, kuru rakstāt komponenta `

`. Vārdu atstarpe ir kaut kas tāds, ko varat manuāli darīt ar nodarbībām vai ID, un tas nav pietiekams iemesls, lai kaut ko tādu lietotu atsevišķi. Mainīgam atbalstam vai maisījumiem jums jāizmanto tāds CSS “uzlabotājs” kā PostCSS vai SASS ar CSS moduļiem.

Atkal mēs vēlamies, lai JavaScript varētu izmantot valodas funkcijas, ieskaitot mainīgos, trīskāršos parametrus vai funkcijas. Ja mūsu risinājums liek mums rakstīt kaut ko “uzlabotu” CSS, nevis JS, tas nedarbosies mūsu vajadzībām.

Abām pieejām ir pieejams daudz css-in-js risinājumu. Pārbaudiet tos! Pagaidām mēs īstenosim to, kas, manuprāt, darbojas vislabāk, lai atrisinātu mūsu mērķus un prasības.

Sāksim!

Mēs izmantosim:

  • ES6 pārveidoja Bābele
  • Reaģējiet uz mūsu iezīmēšanu
  • Afrodīte, lai izveidotu CSS no JS mēs rakstām.

Pirmkārt, mēs izveidosim vienkāršu komponentu, ko sauc par UserMenu. Tam būs neliels lietotāja iemiesojums un izvēlne, kas nolaižoties, noklikšķinot uz tās.

Varat to izmantot savas lietotnes lapā, piemēram:

Atzīmējums nav svarīgs. Tas ir tikai pamata React vai pat AngularJS ar nelielu ES6 / bezvalstisko funkcionālo komponentu sintakse.

Sāksim stilizēt! Sāciet, iekļaujot Afrodīti.

Šeit mēs importējam īpašās funkcijas, kas mums vajadzīgas no Afrodītes, kā norāda dokumenti.

Piezīme par importu: mēs importējam īpašas atsauces ar tekstu “importēt {joslu“ no “foo” sintakse ”. Lasiet vairāk par MDN importēšanas dokumentāciju

Tagad mēs esam uzrakstījuši “const stilus” un izmantojam “StyleSheet.create ()” ar mūsu stilu objektu. Tas ir no Afrodītes dokumentācijas. Afrodīte iepludina tagā `