Leikkaa SASS: Kuinka käyttää sisäisiä JavaScript-tyylejä kaikkeen.

Nykyään käyttöliittymän web-kehitys tarkoittaa sovellusten, ei vain verkkosivujen, rakentamista. Ja vaikka CSS ja SASS olivat molemmat erinomaisia ​​sivujen muotoilulle, ne eivät sovellu hyvin muotoilusovelluksiin. Tämä pätee erityisesti, jos rakennat komponenttipohjaisella strategialla.

Komponenttipohjainen strategia on idea hajottaa sovelluksesi pieniksi, uudelleen käytettäviksi rakennuspalikoiksi, joita kutsutaan komponenteiksi. Komponenttien käyttäminen sovelluksen luomiseen voi tuoda uudelleenkäytettävyyden, selkeyden ja tehokkuuden käyttöliittymääsi.

Komponenttipohjaisen lähestymistavan täydet hyödyt haluamme komponentteja, jotka kapseloivat toiminnon, merkinnät ja tyylit täysin.

Tässä viestissä tutkimme, kuinka tyylien kirjoittaminen inline JavaScriptillä on hieno tapa tukea komponenttipohjaista kehitystä. Loppujen lopuksi meillä on käyttöliittymäkomponentteja, jotka ovat yksi tiedosto, helposti jaettavissa ja täysin itsenäisiä.

Tyylien kirjoittaminen JS: ssä on iso muutos, joten haluan ottaa jonkin aikaa selittää, miksi haluamme tehdä tämän. Uskon, että valitsen oikean työkalun oikeaan työhön. SASS oli varmasti oikea työkalu omalle aikansa, ja tarjosi joitain suuria etuja, kuten:

  • Pesiä
  • muuttujat
  • Mixins

Pesiminen oli suuri etu, koska sen avulla tyylit voivat heijastaa merkintöjä. Jos sinulla olisi:

Voit tehdä:

Tämä etu ei ole enää niin hyödyllinen. Olemme edelleen erittäin kiinnostuneita siitä, että tyylimme heijastavat merkintöjämme, mutta merkinnät ovat muuttuneet!

Nykyään komponenttipohjaista lähestymistapaa käyttämällä mieluummin erotetaan nämä kaksi erillistä komponenttia, nimeltään `UserList` ja` User`. Tuloksena on kaksi tiedostoa, joissa `UserList` sisältää toistuvan sarjan` User`.

Koska hajotamme sovelluksemme komponenteiksi, meidän tulee kirjoittaa tyylimme samalla strategialla. Tämä tarkoittaa, että meidän pitäisi yrittää löytää tyylimme komponenttimerkinnöistämme, jotta ne kapseloidaan yhdessä.

Yksi tapa saavuttaa tämä on käyttää rivityylejä, kuten vanhoina päivinä ennen Cascading-tyylitaulukoita.

Tämä klassinen menetelmä on hyvin yhdenmukainen komponenttiperustaisen lähestymistavan kanssa. Emme käytä sitä, koska se on hyvin rajoittava, mutta se osoittaa periaatteet, joita etsimme uudenaikaisessa muotoiluratkaisussa.

Muuttujat ja sekoitukset

Olemme puhuneet SASS: n pesemisestä, entä muut suuret hyödyt - muuttujat ja sekoitukset?

No, juuri niin tapahtuu, että heille on olemassa toinen melko suosittu ratkaisu - JavaScript!

Eikö olisi hienoa, jos voisimme hyödyntää JavaScriptin luonnollisia ominaisuuksia "var" ja "toiminto" antaaksemme meille tarvitsemme tyyliratkaisun? Jos käytämme JavaScriptiä tyyliemme kirjoittamiseen, saamme joustavuuden, voiman ja tuntemuksen, jota rakastamme JS: ssä. Plus! Koko komponentti voi koostua yhdellä kielellä! Ja jopa yhden tiedoston!

Tavoitteemme

Tässä on mitä haluamme tehdä:

  • Laadi tyylimme suoraan merkinnän rinnalle
  • "tuonti" ja "vienti" muuttujat, kuten värit tai raja-arvot
  • Kirjoita “dynaamiset” tyylit tilan perusteella (avoin / suljettu valikko jne.)

Tässä on vielä muutama vaatimus:

  • Tarvitsee peittämään näennäistilat, kuten `: leiju,: ennen,: jälkeen`
  • On tuettava suoraan mediakyselyjä, kuten `@media (enimmäisleveys: 600 kuvapistettä)`
  • Salli toiminnot / ternäärät (katso yllä oleva dynaaminen)

Sivuhuomautus: ero selitetään “JS-tyylien” ja “CSS: n JS: ssä” välillä

On olemassa kaksi erillistä lähestymistapaa:

  • Voit sisällyttää CSS: n JS: ään
  • Voit kirjoittaa CSS: n JS: n avulla

Pidän parempana toista menetelmää, ja sitä me käsittelemme tässä.

Ensimmäistä lähestymistapaa varten CSS-moduulit on suosittu ratkaisu ”kirjoita CSS omaan JS-luokkaan” luokkaan. Se laajuu tai nimitilat, tavalliselle CSS: lle, jonka kirjoitat komponentin `

. Nimenväli on jotain, jonka voit tehdä manuaalisesti luokkien tai tunnusten kanssa, eikä se ole riittävä syy käyttää jotain tällaista yksin. Muuttuville tuki- tai yhdistelmäsovelluksille on käytettävä CSS-“tehostajaa”, kuten PostCSS tai SASS CSS-moduulien kanssa.

Haluamme jälleen pystyä hyödyntämään JavaScriptiä kielitoiminnoille, mukaan lukien muuttujat, kolmiosaiset tai funktiot. Jos ratkaisumme pakottaa meidät kirjoittamaan jonkinlaista ”parannettua” CSS: ää JS: n sijaan, se ei toimi tarpeidemme mukaan.

Molemmiin lähestymistapoihin on saatavana paljon css-in-js-ratkaisuja. Katso heidät! Toistaiseksi aiomme toteuttaa sen, mikä minun mielestäni toimii parhaiten tavoitteidemme ja vaatimustemme ratkaisemiseksi.

Aloitetaan!

Käytämme:

  • ES6 muutti Babel
  • Reaktio tehdä merkinnät
  • Aphrodite luoda CSS JS kirjoitamme.

Ensin luomme yksinkertaisen komponentin, nimeltään UserMenu. Siinä on pieni käyttäjän avatar ja valikko, joka pudottaa alas, kun napsautat sitä.

Voit käyttää sitä sovellussivullasi kuten:

Merkintä ei ole tärkeä. Tämä on vain React tai jopa AngularJS, jossa on vähän ES6 / valtiottomia toiminnallisten komponenttien syntaksia.

Aloitetaan muotoilu! Aloita sisällyttämällä Afrodite.

Täällä tuomme tarvitsemiasi erityisiä toimintoja Aphroditesta asiakirjojen ohjeiden mukaisesti.

Tuontia koskeva huomautus: Tuomme erityisiä viitteitä `foo'-syntaksista` import {bar}. Lue lisää MDN-tuontidokumentaatiosta

Nyt olemme kirjoittaneet "const tyylit" ja käytämme "StyleSheet.create ()" tyyliobjektimme sisällä. Tämä on Afroditen asiakirjoista. Aphrodite ruiskuttaa `