Sass React JS

Apa itu Sass

Sass adalah pra-prosesor CSS.

File Sass dilakukan  di server dan mengirimkan CSS ke browser.

Bagaimana menggunakan Sass?

Jika kamu menggunakan create-react-app dalam proyek kamu, maka kamu dapat dengan mudah menginstal dan menggunakan Sass dalam proyek React JS kamu.

Instal Sass dengan menjalankan perintah ini di terminal kamu:

C:\Users\Your Name>npm install node-sass

Sekarang kamu siap untuk memasukkan file Sass dalam proyek kamu!

Membuat file Sass

Membuat file Sass sama seperti kamu membuat file CSS, tetapi file Sass memiliki ekstensi file .scss

Dalam file Sass, kamu dapat menggunakan variabel dan fungsi Sass lainnya:

mysass.scss:

Buat variabel untuk menentukan warna teks:

$myColor: red;

h1 {
  color: $myColor;
}

Cara impor file Sass sama seperti kamu mengimpor file CSS:

index.js:

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

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );
  
 
} 
}

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