نحوه استفاده از Sass در React

Sass یک نسخه بهبود یافته از CSS است که می توانید در پروژه های React خود از آن استفاده کنید.

Sass (سبک شیت های نحوی عالی) یک توسعه CSS با ویژگی های اضافی است که آن را قدرتمندتر می کند. بهترین چیز در مورد Sass سازگاری آن با CSS است، به این معنی که می توانید از آن در پروژه های توسعه وب خود با چارچوب های جاوا اسکریپت مانند React استفاده کنید.

با این حال، برخلاف وانیلی CSS، برای استفاده از Sass به کمی تنظیمات نیاز دارید. با راه‌اندازی یک پروژه ساده React.js و ادغام Sass با آن، دریابید که چگونه این کار را انجام می‌دهد.

نحوه استفاده از Sass در پروژه React.js

مانند سایر پردازنده های CSS، Sass به صورت بومی توسط React پشتیبانی نمی شود. برای استفاده از Sass در React، باید یک وابستگی شخص ثالث را از طریق یک مدیریت بسته مانند yarn یا npm نصب کنید.

با اجرای npm –version یا yarn –version می توانید بررسی کنید که آیا npm یا yarn روی دستگاه محلی شما نصب شده است. اگر شماره نسخه را در ترمینال خود نمی بینید، ابتدا npm یا yarn را نصب کنید.

یک پروژه React.js ایجاد کنید

برای پیروی از این راهنما، می توانید یک برنامه ساده React.js را با استفاده از create-react-app راه اندازی کنید.

ابتدا از یک خط فرمان برای رفتن به پوشه ای که می خواهید پروژه React خود را ایجاد کنید استفاده کنید. سپس npx create-react-app را اجرا کنید. این روند ممکن است کمی طول بکشد. پس از اتمام کار، با استفاده از cd ، دایرکتوری برنامه را وارد کنید. محتوای زیر را به عنوان شروع به فایل App.js خود اضافه کنید:

import React from "react"; 
import "./App.css"; 
function App() { 
return ( 
 <div className="wrapper"> 
  <h1>Using Sass in React</h1> 
  <header className="wrapper__btns"> 
   <button>Blue Button</button> 
   <button>Red Button</button> 
   <button>Green Button</button> 
  </header> 
 </div> ); 
} 
export default App;

هنگامی که یک پروژه اصلی React را راه اندازی کردید، نوبت به ادغام Sass می رسد.

Sass را نصب کنید

می توانید Sass را از طریق npm یا yarn نصب کنید. آن را از طریق yarn با اجرای yarn add sass نصب کنید یا اگر npm را ترجیح می دهید، npm install sass را اجرا کنید. مدیر بسته شما آخرین نسخه Sass را به لیست وابستگی ها در فایل package.json پروژه اضافه می کند.

اگر با مشکلی مواجه شدید، در اینجا راهنمای جامعی در مورد اجرای، پیکربندی و عیب یابی اسکریپت های npm ارائه شده است.

تغییر نام فایل‌های .css به .scss یا .sass

در پوشه پروژه، نام App.css و index.css را به ترتیب به App.scss و index.scss تغییر دهید.

پس از تغییر نام آن فایل‌ها، باید فایل‌های وارد شده در فایل‌های App.js و index.js خود را برای مطابقت با پسوند فایل جدید به‌صورت زیر به‌روزرسانی کنید:

import "./index.scss";
import "./App.scss";

از این مرحله به بعد، باید از پسوند .scss برای هر فایل سبکی که ایجاد می کنید استفاده کنید.

واردات و استفاده از متغیرها و ترکیبات

یکی از مهم‌ترین مزایای Sass این است که به شما کمک می‌کند تا با استفاده از متغیرها و میکس‌ها، سبک‌های تمیز و قابل استفاده مجدد بنویسید. در حالی که ممکن است مشخص نباشد که چگونه می توانید همین کار را در React انجام دهید، اما با استفاده از Sass در پروژه هایی که با جاوا اسکریپت ساده و HTML نوشته شده اند تفاوت چندانی ندارد.

برای استفاده از متغیرها در استایلینگ، نیازی به داشتن sass در React ندارید. CSS دارای پشتیبانی داخلی از متغیرها است. راهنمای ما در مورد نحوه استفاده از متغیرهای CSS را برای جزئیات بیشتر بررسی کنید.

ابتدا یک پوشه Styles جدید در پوشه src خود ایجاد کنید. در پوشه Styles دو فایل _variables.scss و _mixins.scss ایجاد کنید. قوانین زیر را به _variables.scss اضافه کنید:

$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;

و موارد زیر را به _mixins.scss اضافه کنید:

@mixin vertical-list {
    display: flex;
    align-items: center;
    flex-direction: column;
}

سپس متغیرها و میکسین ها را در App.scss به صورت زیر وارد کنید:

@import "./Styles/variables";
@import "./Styles/mixins";

از متغیرها و میکس های خود در فایل App.scss استفاده کنید:

@import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
  background-color: $background-color;
  color: $text-color;
  padding: $block-padding;

  &__btns {
    @include vertical-list;
    button {
      width: $btn-width;
      height: $btn-height;
    }
   }
}

به این صورت است که شما از متغیرها و میکسین ها در React استفاده می کنید. علاوه بر میکس‌ها و متغیرها، می‌توانید از تمام ویژگی‌های عالی دیگر مانند توابع نیز در Sass استفاده کنید. تا زمانی که scss را در پروژه React خود راه اندازی کنید، محدودیتی وجود ندارد.

استفاده از Sass در React.js

Sass عملکرد بیشتری را در بالای CSS ارائه می دهد، که دقیقاً همان چیزی است که برای نوشتن کد CSS قابل استفاده مجدد نیاز دارید.

می توانید با نصب بسته sass از طریق npm یا yarn، به روز رسانی فایل های CSS خود به .scss یا .sass، و سپس به روز رسانی واردات خود برای استفاده از پسوند فایل جدید، استفاده از Sass را در React شروع کنید. پس از آن، می توانید شروع به نوشتن SCSS در React کنید.

منبع مقاله