Sass (style sheet yang mengagumkan secara sintaksis) adalah ekstensi CSS dengan fitur tambahan yang membuatnya lebih bertenaga. Hal terbaik tentang Sass adalah kompatibilitasnya dengan CSS, yang berarti Anda dapat menggunakannya dalam proyek pengembangan web Anda dengan kerangka kerja JavaScript seperti React.
Namun, tidak seperti vanilla CSS, Anda memerlukan sedikit pengaturan untuk menggunakan Sass. Cari tahu cara kerjanya dengan menyiapkan proyek React.js sederhana dan mengintegrasikan Sass dengannya.
Cara Menggunakan Sass di Proyek React.js Anda
Seperti prosesor CSS lainnya, Sass tidak didukung secara native oleh React. Untuk menggunakan Sass di React, Anda perlu menginstal dependensi pihak ketiga melalui manajer paket seperti benang atau npm.
Anda dapat memeriksa apakah npm atau benang diinstal pada mesin lokal Anda dengan menjalankan
npm --versi atau benang --versi. Jika Anda tidak melihat nomor versi di terminal, instal npm atau benang terlebih dahulu.Buat Proyek React.js
Untuk mengikuti panduan ini, Anda dapat menyiapkan aplikasi React.js sederhana menggunakan create-react-app.
Pertama, gunakan baris perintah untuk menavigasi ke folder tempat Anda ingin membuat proyek React. Lalu lari npx buat-reaksi-aplikasi . Setelah proses selesai, masuk ke direktori aplikasi menggunakan CD . Tambahkan konten berikut ke Aplikasi.js file sebagai starter:
impor Reaksi dari "reaksi";
impor "./App.scss";
fungsiAplikasi() {
kembali (
<div namakelas="pembungkus">
<h1>Menggunakan Sass di Bereaksi</h1>
<nama kelas tajuk="wrapper__btns">
<tombol>Tombol Biru</button>
<tombol>Tombol Merah</button>
<tombol>Tombol Hijau</button>
</header>
</div> );
}
eksporbawaan Aplikasi;Setelah Anda menyiapkan proyek React dasar, saatnya untuk mengintegrasikan Sass.
Instal Sas
Anda dapat menginstal Sass melalui npm atau benang. Instal melalui benang dengan menjalankan benang tambahkan sass atau, jika Anda lebih suka npm, jalankan npm instal sass. Manajer paket Anda akan menambahkan Sass versi terbaru ke daftar dependensi dalam proyek package.json mengajukan.
Ganti nama File .css menjadi .scss atau .sass
Di folder proyek, ganti nama App.css dan index.css menjadi App.scss dan index.scss.
Setelah mengganti nama file tersebut, Anda perlu memperbarui impor di file App.js dan index.js agar cocok dengan ekstensi file baru sebagai berikut:
impor "./index.scss";
impor "./App.scss";Mulai saat ini, Anda harus menggunakan ekstensi .scss untuk file gaya apa pun yang Anda buat.
Mengimpor dan Menggunakan Variabel dan Mixin
Salah satu yang paling signifikan kelebihan Sas adalah membantu Anda menulis gaya yang bersih dan dapat digunakan kembali menggunakan variabel dan mixin. Meskipun mungkin tidak jelas bagaimana Anda dapat melakukan hal yang sama di React, itu tidak jauh berbeda dengan menggunakan Sass dalam proyek yang ditulis dengan JavaScript dan HTML biasa.
Pertama, buat yang baru Gaya folder di Anda src map. Di folder Styles, buat dua file: _variabel.scss Dan _mixins.scss. Tambahkan aturan berikut ke _variables.scss:
$warna latar belakang: #f06292;
$teks-warna: #f1d3b3;
$btn-lebar: 120px;
$btn-tinggi: 40px;
$ blok-padding: 60px;Dan tambahkan berikut ini ke _mixins.scss:
@mixin daftar vertikal {
tampilan: fleksibel;
menyelaraskan-item: tengah;
arah fleksibel: kolom;
}Kemudian impor variabel dan mixin di App.scss sebagai berikut:
@impor "./Gaya/variabel";
@impor "./Styles/mixins";Gunakan variabel dan mixin Anda di file App.scss:
@impor "./Styles/variables.scss";
@impor "./Styles/mixins";
.pembungkus {
background-color: $background-color;
warna: $teks-warna;
padding: $block-padding;&__btns {
@termasuk vertikal-daftar;
tombol {
lebar: $btn-lebar;
tinggi: $btn-tinggi;
}
}
}
Begitulah cara Anda menggunakan variabel dan mixin di React. Selain mixin dan variabel, Anda juga dapat menggunakan semua fitur hebat lainnya di Sass, seperti fungsi. Tidak ada batasan.
Menggunakan Sass di React.js
Sass menyediakan lebih banyak fungsionalitas di atas CSS, persis seperti yang Anda perlukan untuk menulis kode CSS yang dapat digunakan kembali.
Anda dapat mulai menggunakan Sass di React dengan menginstal paket sass melalui npm atau benang, memperbarui file CSS Anda menjadi .scss atau .sass, lalu memperbarui impor Anda untuk menggunakan ekstensi file baru. Setelah itu, Anda dapat mulai menulis SCSS di React.