Styling React Menggunakan Sass

Apa itu Sass

Sass adalah pra-prosesor CSS.

File Sass dieksekusi di server dan mengirimkan CSS ke browser.

Anda dapat mempelajari lebih lanjut tentang Sass di Tutorial Sass kami .

Bisakah saya menggunakan Sas?

Jika Anda menggunakan create-react-appdalam proyek Anda, Anda dapat dengan mudah menginstal dan menggunakan Sass di proyek Bereaksi Anda.

Instal Sass dengan menjalankan perintah ini di terminal Anda:

>npm i sass

Sekarang Anda siap untuk memasukkan file Sass ke dalam proyek Anda!

Buat file Sass

Buat file Sass dengan cara yang sama seperti Anda membuat file CSS, tetapi file Sass memiliki ekstensi file .scss

Dalam file Sass Anda dapat menggunakan variabel dan fungsi Sass lainnya:

my-sass.scss:

Buat variabel untuk menentukan warna teks:

$myColor: red;

h1 {
  color: $myColor;
}

Impor file Sass dengan cara yang sama seperti Anda mengimpor file CSS:

indeks.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));

❮ Sebelumnya Berikutnya ❯

Tutorial Bereaksi