Sass Styling

React-ni Sass bilan Styling qilish

Sass nima?

Sass CSS pre-protsessoridir.

Sass fayllari serverda bajariladi va brauzerga CSS yuboriladi.

Sass haqida batafsilroq ma'lumotni Sass Tutorialimizda o'qishingiz mumkin.

Sass-dan foydalanishim mumkinmi?

Agar siz create-react-app yordamida loyiha yaratgan bo'lsangiz, siz Sass-ni osonlik bilan o'rnatishingiz va React loyihalaringizda ishlatishingiz mumkin.

Sass-ni o'rnatish uchun terminalda quyidagi buyruqni bajaring:

npm i sass

Endi siz Sass fayllarini loyihangizga qo'shishga tayyorsiz!

Sass Faylini Yaratish

Sass faylini CSS fayllarini yaratganingizdek yarating, ammo Sass fayllarining kengaytmasi .scss bo'ladi.

Sass fayllarida siz o'zgaruvchilar va boshqa Sass funksiyalaridan foydalanishingiz mumkin:

Misol:

my-sass.scss:

Matnning rangini belgilash uchun o'zgaruvchi yarating:

$myColor: red;
 
h1 {
  color: $myColor;
}

Sass faylini CSS faylini import qilganingizdek import qiling:

Misol:

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
 
const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);