React Sass

Sass nima?

Sass - bu CSS-dan oldingi protsessor.

Sass fayllari serverda bajariladi va CSS-ni brauzerga yuboradi.

Sass CSS-ga o‘zgaruvchilar, joylashtirish, miksinlar va boshqalar kabi qo‘shimcha funksiyalarni qo‘shadi.

Sass haqida ko‘proq ma’lumotni Sass qo‘llanmamizdan olishingiz mumkin.

Reactga Sass qo‘shiladi

Sassni React loyihasiga qo‘shish uchun siz Sass paketini o‘rnatishingiz kerak:

Paketni npm yordamida o‘rnating:

Endi siz Sass fayllarini loyihangizga qo‘shishga tayyorsiz!

Sass faylini yarating

Sass faylini xuddi CSS fayllarini yaratganingizdek yarating, lekin Sass fayllari .scss fayl kengaytmasiga ega:

$myColor: red;

h1 {
  color: $myColor;
}

Sass faylini import qiling

Sass faylini React componentingizga import qiling:

import { createRoot } from 'react-dom/client';
import './MyStyle.scss';

function MyHeader() {
  return (
    <h1>My Header</h1>
  );
}

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

Sass haqida ko‘proq ma’lumotni Sass qo‘llanmamizdan olishingiz mumkin.

Sass modullari

Sass-da ranglar, matematika, stringlar va hokazolarni boshqarish uchun foydalanishingiz mumkin bo‘lgan ko‘plab o‘rnatilgan modullar mavjud.

Bir misol sass:color moduli.

U faqat foizni berish orqali rangni quyuqroq yoki ochroq qilish funksiyasiga ega:

@use 'sass:color';
$myColor: red;

h1 {
  color: $myColor;
}

h2 {
  color: color.adjust($myColor, $lightness: -20%);
}

h3 {
  color: color.adjust($myColor, $lightness: 20%);
}

Keling, componentimizga sarlavhalarni qo‘shamiz:

import { createRoot } from 'react-dom/client';
import './MyStyle.scss';

function MyHeader() {
  return (
    <div>
      <h1>My Header 1</h1>
      <h2>My Header 2</h2>
      <h3>My Header 3</h3>
    </div>
  );
}

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

Sass haqida ko‘proq ma’lumotni Sass qo‘llanmamizdan olishingiz mumkin.