Vágja le a SASS-ot: Hogyan használjuk az összes online stílusú JavaScript-stílust.

Manapság az elülső webfejlesztés az alkalmazások építéséről szól, nem csak a weboldalakról. És bár a CSS és a SASS egyaránt kiválóan alkalmasak az oldalak stílusának kialakítására, nem alkalmasak stílusos alkalmazásokra. Ez különösen igaz, ha egy komponens alapú stratégiával épít.

Komponens-alapú stratégia az az ötlet, hogy az alkalmazást kicsi, újrafelhasználható építőelemekre, úgynevezett komponensekre bontja. Komponensek alkalmazása az alkalmazás összeállításához újrahasznosíthatóságot, tisztaságot és hatékonyságot hozhat a felhasználói felülethez.

Az alkotóelem-alapú megközelítés teljes előnyeinek kihasználásához olyan komponenseket akarunk, amelyek teljes mértékben tartalmazzák a funkciót, a jelölést és a stílusokat.

Ebben a bejegyzésben megvizsgáljuk, hogy a stílusok írása a beépített JavaScript használatával kiválóan támogatja az összetevő alapú fejlesztést. Végül olyan előtér-összetevőkkel fogunk foglalkozni, amelyek egyetlen fájlból állnak, könnyen megoszthatók és teljesen önállóak.

A stílusok írása a JS-ben nagy változás, ezért szeretnék egy kis időt elmagyarázni, hogy miért akarjuk ezt megtenni. Hiszem abban, hogy megválasztom a megfelelő szerszámot a megfelelő munkához. A SASS minden bizonnyal a megfelelő eszköz volt korában, és olyan nagy előnyeket nyújtott, mint például:

  • fészekrakó
  • változók
  • mixinek

A fészkelés nagy előnye volt, mert lehetővé tette a stílusainak, hogy tükrözzék a jelölést. Ha neked lenne:

Megteheted:

Ez az előny már nem olyan hasznos. Még mindig nagyon érdekel, hogy stílusaink tükrözzék jelöléseinket, de a jelölésünk megváltozott!

Manapság, egy komponens-alapú megközelítést alkalmazva, inkább ezeket két különálló elemre osztjuk: „UserList” és „User”. Az eredmény két fájl, ahol a "UserList" tartalmaz egy ismétlődő "User" sorozatot.

Mivel alkalmazásunkat összetevőkre bontjuk, stílusainkat ugyanabban a stratégiában kell írni. Ez azt jelenti, hogy meg kell próbálnunk együtt elhelyezni stílusainkat az alkotóelem jelölésével, hogy azok együtt legyenek beágyazva.

Ennek egyik módja az inline stílusok használata, mint például a régen a Cascading Style Sheets előtt.

Ez a klasszikus módszer nagyon jól igazodik az alkatrész-alapú megközelítéshez. Nem fogjuk használni, mert nagyon korlátozó, de bemutatja azokat az elveket, amelyeket egy modern stílusmegoldásban keresünk.

Változók és keverékek

Beszéltünk a SASS fészkeléséről, mi lenne a többi nagy előnnyel - a változókkal és a keverékekkel?

Nos, éppen így történik egy másik, nagyon népszerű megoldás azokra - JavaScript!

Nem lenne nagyszerű, ha felhasználnánk a JavaScript természetes tulajdonságait a „var” és a „function” számára, hogy megadjuk azt, amire szükségünk van egy stílusmegoldásban? Ha a JavaScript használatával írjuk stílusunkat, akkor megszerezzük a rugalmasságot, erőt és ismereteket, amelyeket szeretünk a JS iránt. Plusz! A teljes alkotóelem egyetlen nyelven komponálható! És még egyetlen fájlt is!

Céljaink

Íme, mit akarunk csinálni:

  • Komponálja stílusainkat közvetlenül a jelölés mellett
  • "import" és "export" változók, például színek vagy töréspontok
  • Írjon „dinamikus” stílusokat az állapot alapján (nyitott / zárt menü, stb.)

Itt van még néhány követelmény:

  • Olyan álszerepeket kell lefednie, mint például:: lebeg,: előtt, után:
  • Közvetlenül támogatnia kell a médialekérdezéseket, mint például a "@media (maximális szélesség: 600 képpont)"
  • Funkciók / háromoldalú elemek engedélyezése (lásd fent, dinamikus)

Oldalsó megjegyzés: a „JS stílusok” és a „CSS a JS-ben” közötti különbség magyarázata

Két különféle megközelítés létezik:

  • A CSS-t felveheti a JS-be
  • A CSS segítségével megírhatja a CSS-t

Jobban szeretem a második módszert, és erre fogunk kitérni.

Az első megközelítésnél a CSS-modulok népszerű megoldás a „CSS írása a JS-ben” kategóriában. Terjedelme vagy névtér, a szokásos CSS, amelyet egy elem

-be ír. A névtávot valami kézzel elvégezheti az osztályokkal vagy az azonosítókkal, és nem elégséges ok arra, hogy valami ilyesmit önmagában használjon. A változó támogatásokhoz vagy keverékekhez olyan CSS „javítót” kell használni, mint például a PostCSS vagy a SASS a CSS modulokkal.

Megint akarjuk képessé tenni a JavaScriptet a nyelvi funkciók kiaknázására, beleértve a változókat, háromoldalú elemeket vagy függvényeket. Ha megoldásunk arra kényszerít bennünket, hogy írjunk valamiféle „továbbfejlesztett” CSS-t a JS helyett, akkor az nem fog működni az igényeink szerint.

Mindkét megközelítéshez sok css-in-js megoldás elérhető. Nézd meg őket! Egyelőre azt fogjuk megvalósítani, ami a legmegfelelőbbnek bizonyult a céljaink és követelményeink megoldása érdekében.

Kezdjük el!

A következőket fogjuk használni:

  • ES6 átalakította Babel
  • Reagáljon, ha megjelöli jelölésünket
  • Aphrodite, hogy a JS-ből CSS-t hozzon létre, amit írunk.

Először egy egyszerű összetevőt hozunk létre, a UserMenu néven. Van egy kis felhasználói avatárja és egy menü, amely lecsökken, amikor rákattint.

Használhatja az alkalmazásoldalán, például:

A jelölés nem fontos. Ez csak egy alapvető React vagy akár AngularJS, kevés ES6 / állapot nélküli funkcionális komponens szintaxissal.

Kezdjük stílusozni! Kezdje azzal, hogy felveszi Aphroditét.

Itt importáljuk az Aphrodite-tól a szükséges funkciókat, mint a doktorok.

Megjegyzés a behozatalról: Különleges hivatkozásokat importálunk az `import {bar} szótól a 'foo' szintaxisból. További információ az MDN importálási dokumentációjáról

Most írtunk egy "const stílusokat", és a "StyleSheet.create ()" kifejezést használjuk a stílusobjektumunk belsejében. Ez az Aphrodite dokumentációjából származik. Aphrodite beilleszti a