Izrežite SASS: Kako koristiti inline JavaScript stilove za sve.

Danas, razvoj web mjesta na prvom mjestu temelji se na izradi aplikacija, a ne samo web stranica. I dok su CSS i SASS bili izvrsni za oblikovanje stranica, nisu baš prikladni za aplikacije za stiliziranje. To je posebno istinito ako gradite sa strategijom temeljenom na komponentama.

Strategija koja se temelji na komponentama je ideja da vašu aplikaciju raščlanite na male blokove koji se mogu ponovo koristiti i koji se nazivaju komponente. Korištenje komponenti za izradu vaše aplikacije može vam donijeti ponovnu upotrebu, jasnoću i učinkovitost na prednjem kraju.

Da bismo u potpunosti iskoristili pristup temeljen na komponentama, želimo komponente koje u potpunosti enkapsuliraju funkciju, označavanje i stilove.

U ovom ćemo postu istražiti kako je pisanje stilova pomoću umetnutog JavaScript odličan način za podršku razvoju komponenti. Na kraju ćemo završiti sa komponentama sučelja koje su jedna datoteka, lako se mogu dijeliti i potpuno su samostalni.

Pisanje stilova u JS-u velika je promjena, pa želim izdvojiti malo vremena da objasnim zašto bismo to željeli učiniti. Vjerujem u odabir pravog alata za pravi posao. SASS je zasigurno bio pravi alat za svoje vrijeme, pružajući neke velike prednosti kao što su:

  • traženje gnijezda
  • Varijable
  • Mixins

Gniježđenje je bila velika korist jer je omogućilo da vaši stilovi odražavaju vašu marku. Ako si imao:

Mogli biste:

Ova pogodnost više nije korisna. I dalje nas zanima kako stilovi zrcale našu oznaku, ali markup se promijenio!

Danas, koristeći pristup temeljen na komponentama, radije ih dijelimo na dvije različite komponente nazvane `UserList` i` User`. Rezultat su dvije datoteke, gdje bi "UserList" sadržavao niz "User" koji se ponavlja.

Budući da razbijamo našu aplikaciju na komponente, trebali bismo pisati svoje stilove pomoću iste strategije. To znači da bismo trebali pokušati locirati stilove s oznakom naše komponente kako bi se oni zajedno zatvorili.

Jedan od načina da se to postigne je uporaba inline stilova, poput starih vremena prije kaskadnih tablica stilova.

Ova je klasična metoda vrlo dobro usklađena s komponentnim pristupom. Nećemo ga koristiti jer je vrlo ograničavajuće, ali pokazuje principe koje tražimo u modernom stilskom rješenju.

Varijable i mješavine

Razgovarali smo o SASS gniježđenju, a što je s ostalim velikim prednostima - varijablama i mješavinama?

Pa, jednostavno se događa da za to postoji još jedno prilično popularno rješenje - JavaScript!

Ne bi li bilo sjajno kada bismo mogli iskoristiti JavaScript prirodne značajke za `var` i` function` da nam pruže ono što trebamo u stilskom rješenju? Ako za pisanje svojih stilova koristimo JavaScript, dobit ćemo fleksibilnost, moć i poznatost koju volimo u JS-u. Plus! Čitava naša komponenta može biti sastavljena na jednom jeziku! Pa čak i jednu datoteku!

Naši ciljevi

Evo što želimo učiniti:

  • Sastavite naše stilove izravno uz označavanje
  • varijable `import` i` export` poput boja ili prijelomnih točaka
  • Pišite "dinamičke" stilove na temelju stanja (otvoren / zatvoren izbornik itd.)

Evo još nekoliko zahtjeva:

  • Potrebno je pokriti pseudo stanja poput `: lebdjeti,: prije,: poslije`
  • Mora izravno podržavati medijske upite poput `@media (max-širina: 600px)`
  • Dopusti funkcije / ternare (vidi dinamiku, gore)

Bočna napomena: objašnjavanje razlike između "JS stilova" i "CSS u JS"

Postoje dva različita pristupa:

  • CSS možete uključiti u svoj JS
  • Možete napisati CSS pomoću JS

Više volim drugu metodu i to je ono što ćemo ovdje pokriti.

Za prvi pristup, CSS moduli popularno su rješenje u kategoriji "napiši CSS u svoj JS". Raspon ili razmak imena, uobičajeni CSS koji pišete u komponenti `

`. Razmak imena je nešto što možete ručno raditi s predavanjima ili ID-ovima, i to nije dovoljan razlog da se tako nešto koristi samo. Za promjenjivu podršku ili mixine, trebate koristiti CSS "pojačivač" poput PostCSS ili SASS s CSS modulima.

Opet želimo biti u mogućnosti koristiti JavaScript za jezične značajke uključujući varijable, ternare ili funkcije. Ako nas rješenje prisili da umjesto JS-a napišemo neku vrstu „poboljšanog“ CSS-a, neće funkcionirati za naše potrebe.

Dostupno je puno css-in-js rješenja za oba pristupa. Provjerite ih! Za sada ćemo primijeniti ono za što sam utvrdio da najbolje djeluje kako bismo riješili naše ciljeve i zahtjeve.

Započnimo!

Koristit ćemo:

  • ES6 transformirao Babel
  • Reagirajte da napravimo naš markup
  • Afrodita za stvaranje CSS-a iz JS-a pišemo.

Prvo ćemo stvoriti jednostavnu komponentu, koja se zove UserMenu. Imat će malu korisničku avatar i izbornik koji se ispadne kad kliknete na nju.

Možete ga koristiti na stranici svoje aplikacije poput:

Označavanje nije važno. Ovo je samo osnovni React ili čak AngularJS s malo sintakse funkcionalnih komponenti ES6 / stanje bez stanja.

Krenimo sa stylingom! Započnite uključivanjem Afrodite.

Ovdje uvozimo određene funkcije koje su nam potrebne od Afrodite prema uputama dokumenata.

Napomena o uvozu: uvozimo određene reference s sintaksom 'import {bar} iz' foo '. Pročitajte više o uvoznoj dokumentaciji MDN-a

Sada smo napisali `const stilove` i upotrijebili` StyleSheet.create () `s objektom naših stilova iznutra. Ovo je iz dokumentacije o Afroditi. Afrodita ubacuje oznaku "