استایل دهی با Sass (Sass)

اینجا استایل دهی با Sass در ری اکت را قدم به قدم می بینیم. Sass یک پیش پردازنده (Pre-processor) برای CSS است؛ یعنی قبل از CSS اجرا می شود و در نهایت فقط CSS معمولی به مرورگر می رسد.

Sass چیست؟

Sass یک پیش پردازنده CSS است. یعنی تو کد Sass می نویسی و ابزار Sass آن را به CSS ساده تبدیل می کند.

فایل های Sass روی سرور یا هنگام build پروژه اجرا می شوند. خروجی آن ها فقط یک فایل CSS است که مرورگر مثل همیشه آن را می خواند.

Sass امکانات اضافه می دهد؛ مثل متغیر (Variable)، تو در تو نوشتن (Nesting) و تابع های آماده. این امکانات کدهای استایل را مرتب تر و کوتاه تر می کنند؛ مثل داشتن کلید میانبر در کیبورد.

اگر خواستی عمیق تر بروی، می توانی بعداً آموزش Sass را ببینی؛ اما فعلاً روی استایل دهی با Sass در ری اکت تمرکز می کنیم.

نصب Sass در پروژه ری اکت

برای استایل دهی با Sass در ری اکت باید پکیج Sass را نصب کنی. npm یک مدیریت کننده پکیج است؛ یعنی برنامه ای که کتابخانه ها را برایت نصب می کند.

در پوشه پروژه ری اکت، ترمینال را باز کن و این دستور را بزن:

npm install sass

مشاهده در ادیتور

بعد از نصب، ری اکت خودش می فهمد که فایل های .scss را باید به CSS تبدیل کند. تو فقط کافی است آن ها را در کامپوننت ها import کنی.

ساخت فایل Sass با پسوند .scss

مثل ساختن فایل CSS، یک فایل جدید بساز؛ اما پسوند آن باید .scss باشد. مثلاً اسمش را بگذار MyStyle.scss.

در Sass می توانی متغیر تعریف کنی. متغیر یعنی یک اسم ثابت برای یک مقدار؛ مثل ذخیره کردن رنگ در یک متغیر تا بعداً چندبار استفاده شود.

$myColor: red;

h1 {
  color: $myColor;
}

مشاهده در ادیتور

اینجا $myColor یک متغیر است که رنگ قرمز را نگه می دارد. هرجا color: $myColor بنویسی، بعد از کامپایل، به color: red تبدیل می شود.

استفاده از Sass در کامپوننت ری اکت

حالا باید فایل Sass را داخل کامپوننت import کنیم. import یعنی این فایل را به این ماژول اضافه کن.

در فایل main.jsx (یا هر فایل ورودی دیگر) می توانی این طور عمل کنی:

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

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

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

مشاهده در ادیتور

حالا استایل دهی با Sass در ری اکت فعال است. هر تغییری در MyStyle.scss بدهی، روی کامپوننت MyHeader دیده می شود.

برای مرور بعدی می توانی خود صفحه استایل دهی با Sass در ری اکت را بوکمارک کنی.

ماژول های Sass و تغییر رنگ ها

Sass ماژول های داخلی (Built-in Modules) دارد. ماژول یعنی بسته ای از تابع ها و ابزارهای آماده برای یک موضوع خاص.

یکی از ماژول های مهم، sass:color است. این ماژول تابع هایی برای کار با رنگ ها دارد؛ مثلاً روشن تر یا تیره تر کردن یک رنگ.

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

h1 {
  color: $myColor;
}

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

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

مشاهده در ادیتور

تابع color.adjust از ماژول sass:color استفاده می کند. این تابع بر اساس درصد، رنگ را روشن تر یا تیره تر می کند؛ مثل کم و زیاد کردن نور صفحه گوشی.

نمایش تیترها در کامپوننت ری اکت

حالا سه تیتر h1، h2 و h3 را در یک کامپوننت ری اکت نشان می دهیم تا تفاوت رنگ ها را ببینی.

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 تنظیم شده اند.

نکته: فایل های Sass هنگام build به CSS کامپایل می شوند. یعنی در مرورگر فقط فایل CSS نهایی حضور دارد، نه خود Sass.

اگر دوست داری ساختار کدها را بیشتر تمیز کنی، می توانی بعداً کنار Sass از الگوهایی مثل کامپوننت های مرتبه بالاتر (HOC) هم استفاده کنی تا کدهایت منظم تر شوند.

جمع بندی سریع

• Sass یک پیش پردازنده CSS است و در نهایت فقط CSS خروجی می دهد.
• برای استایل دهی با Sass در ری اکت، پکیج sass را با npm نصب کن.
• فایل های .scss را بساز و در کامپوننت ها import کن.
• با ماژول sass:color می توانی خیلی راحت رنگ ها را تنظیم کنی.
• یادت باشد Sass در build به CSS تبدیل می شود؛ مرورگر Sass را مستقیم نمی خواند.