Potong SASS: Bagaimana Menggunakan Gaya JavaScript Inline untuk Semua.

Hari ini, perkembangan web depan adalah tentang membina aplikasi, bukan hanya laman web. Dan manakala CSS dan SASS sama-sama hebat untuk halaman gaya, mereka tidak sesuai untuk aplikasi styling. Ini benar terutamanya jika anda membina dengan strategi berasaskan komponen.

Strategi berasaskan komponen adalah idea untuk memecahkan permohonan anda ke dalam blok bangunan kecil yang boleh diguna semula yang dipanggil komponen. Menggunakan komponen untuk membina aplikasi anda boleh membawa kebolehgunaan, kejelasan dan kecekapan ke hujung depan anda.

Untuk mendapatkan manfaat penuh dari pendekatan berasaskan komponen, kami menginginkan komponen yang sepenuhnya merangkumi fungsi, markup, dan gaya.

Dalam siaran ini, kami akan meneroka bagaimana gaya penulisan menggunakan JavaScript dalam talian adalah cara terbaik untuk menyokong pembangunan berasaskan komponen. Pada akhirnya, kami akan berakhir dengan komponen front-end yang merupakan satu fail, mudah dikongsi, dan sepenuhnya mandiri.

Menulis gaya anda dalam JS adalah perubahan besar, jadi saya mahu mengambil sedikit masa untuk menjelaskan mengapa kami mahu melakukan ini. Saya percaya dalam memilih alat yang sesuai untuk kerja yang betul. SASS pastinya alat yang tepat untuk waktunya, menyediakan beberapa manfaat yang besar seperti:

  • Sarang
  • Pembolehubah
  • Mixin

Sarang adalah manfaat yang besar kerana ia membenarkan gaya anda mencerminkan markup anda. Sekiranya anda mempunyai:

Anda boleh lakukan:

Manfaat ini tidak lagi berguna. Kami masih sangat berminat untuk mempunyai gaya kami mencerminkan markup kami, tetapi penanda kami telah berubah!

Hari ini, dengan menggunakan pendekatan berasaskan komponen, kami lebih suka memisahkannya kepada dua komponen yang berbeza iaitu `UserList` dan` User`. Hasilnya ialah dua fail, di mana `UserList` akan mengandungi siri pengulangan` Pengguna`.

Oleh kerana kami memecah permohonan kami ke dalam komponen, kami harus menulis gaya kami menggunakan strategi yang sama. Itu bermakna kita perlu cuba untuk mencari gaya kami dengan markup komponen kami supaya mereka akan digabungkan bersama.

Salah satu cara untuk mencapai kejayaan ini adalah menggunakan gaya inline, seperti zaman dahulu sebelum Cascading Style Sheets.

Kaedah klasik ini sangat sesuai dengan pendekatan berasaskan komponen. Kami tidak akan menggunakannya, kerana ia sangat membataskan, tetapi ia menunjukkan prinsip yang kami cari dalam penyelesaian gaya moden.

Pembolehubah dan Mixin

Kami telah berbincang mengenai SASS 'bersarang, bagaimana pula dengan manfaat besar lain - pemboleh ubah dan campuran?

Nah, ia hanya berlaku bahawa satu lagi penyelesaian yang cukup popular untuk mereka - JavaScript!

Bukankah lebih baik jika kita boleh memanfaatkan ciri semulajadi JavaScript untuk `var` dan` fungsi` untuk memberi kita apa yang kita perlukan dalam penyelesaian gaya? Sekiranya kita menggunakan JavaScript untuk menulis gaya kita, kita dapat fleksibiliti, kuasa, dan kebiasaan yang kita cintai tentang JS. Plus! Keseluruhan komponen kami boleh terdiri dalam bahasa tunggal! Dan walaupun satu fail!

Matlamat kami

Inilah yang kami mahu lakukan:

  • Tulis gaya kami secara langsung di samping markup
  • `import` dan` eksport` pembolehubah seperti warna atau titik putus
  • Tulis gaya "dinamik" berdasarkan keadaan (buka / tutup menu, dan sebagainya)

Berikut adalah beberapa lagi keperluan:

  • Perlu meliputi keadaan pseudo seperti `: hover,: before,: after`
  • Perlu terus menyokong pertanyaan media seperti `@media (max-width: 600px)`
  • Benarkan fungsi / terarium (lihat dinamik, di atas)

Nota sebelah: menerangkan perbezaan antara "gaya JS" dan "CSS dalam JS"

Terdapat dua pendekatan yang berbeza:

  • Anda boleh memasukkan CSS dalam JS anda
  • Anda boleh menulis CSS anda menggunakan JS

Saya lebih suka kaedah kedua dan ini yang akan kami sampaikan di sini.

Untuk pendekatan pertama, CSS Modul adalah penyelesaian yang popular dalam kategori "menulis CSS dalam kategori JS anda." Skop ini, atau ruang nama, CSS biasa yang anda tulis pada `

` komponen. Spasi nama adalah sesuatu yang boleh anda lakukan secara manual dengan kelas atau ID, dan tidak cukup alasan untuk menggunakan sesuatu seperti ini sahaja. Untuk sokongan atau campuran variatif, anda perlu menggunakan CSS "enhancer" seperti PostCSS atau SASS dengan CSS Modules.

Sekali lagi, kami ingin dapat memanfaatkan JavaScript untuk ciri bahasa termasuk pemboleh ubah, ternari, atau fungsi. Jika penyelesaian kami memaksa kami untuk menulis beberapa jenis "dipertingkatkan" CSS bukannya JS, ia tidak akan berfungsi untuk keperluan kami.

Terdapat banyak penyelesaian css-in-js yang tersedia untuk kedua-dua pendekatan. Semak em! Buat masa ini, kami akan melaksanakan apa yang saya dapati yang terbaik untuk menyelesaikan matlamat dan keperluan kami.

Mari kita mulakan!

Kami akan menggunakan:

  • ES6 yang diubah oleh Babel
  • Bertindak balas untuk menjadikan markup kami
  • Aphrodite untuk mencipta CSS dari JS kita menulis.

Pertama, kami akan membuat komponen mudah, dipanggil UserMenu. Ia akan mempunyai avatar pengguna kecil, dan menu yang turun apabila anda mengklik.

Anda boleh menggunakannya di halaman aplikasi anda seperti:

Penanda tidak penting. Ini hanya asas React atau bahkan AngularJS dengan sintaks komponen fungsional ES6 / stateless.

Mari mulakan gaya! Mulakan dengan memasukkan Aphrodite.

Di sini, kami mengimport fungsi khusus yang kami perlukan dari Aphrodite sebagai pengajaran dokumen.

Nota mengenai import: Kami mengimport rujukan khusus dengan `import {bar} daripada sintaks 'foo'. Baca lebih lanjut mengenai dokumentasi import MDN

Kini kami telah menulis `gaya st 'dan menggunakan` StyleSheet.create () `dengan gaya kami di dalamnya. Ini adalah dari dokumentasi Aphrodite. Aphrodite menyuntik tag `