استفاده از Sass در Create React App نسخه ۲

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 2 دقیقه
دسته بندی ها : react

با انتشار نسخه اخیر Create React App، تعداد زیادی ابزار جدید برای بازی کردن با آن‌ها پیدا کردیم. Sass ابزاری است که من درباره‌اش هیجان زده‌ام؛ زیرا قبلا مجبور بودیم که فایل‌های .scss را به کار بگیریم تا فایل‌های .css را درست در ساختار پوشه ما کمپایل کرده و بنویسند. وقتی که دو نسخه از فایل‌های styles.css و styles.css مشابه داشته باشید، فایل‌های به هم ریخته‌ای ایجاد می‌شوند.

استفاده از Sass در Create React App نسخه ۲

Create React App نسخه ۲،‌ استفاده از Sass را در یک خط بسیار آسان‌تر می‌کند

شما ممکن است درباره استفاده از Sass در React نگران باشید. آیا کتابخانه‌های CSS-in-JS مانند styled-components یا aphrodite، راه هوشمندانه‌تری برای نوشتن استایل‌ها نیست؟ من معتقدم که اضافه کردن پشتیبانی Sass به Create React App یک کمک بزرگ به تازه کاران React خواهد بود. این که چگونه از Sass در React استفاده کنیم، سوالی است که همیشه از افرادی که به React وارد می‌شوند می‌شنوم. با اضافات React 16.6 مانند React.memo() و اضافات عملکردی React 16.7 مانند hooks، شروع کار با React از همیشه ساده‌تر است.

  1. شروع کار
  2. استفاده و به اشتراک گذاری متغیرهای Sass
  3. فایل‌های Sass از پکیج‌های جداگانه
  4. نتیجه گیری و دمو

شروع کار

قدم‌های مورد نیاز برای استفاده از Sass در Create React App:

  1. نصب node-sass: npm install node-sass
  2. تغییر فایل‌های .css به .scss
  3. تغییر تمام importها در جهت استفاده از .scss
npm install node-sass -S

پس از این که نام فایل را از .css به .scss تغییر دادیم، می‌توانیم Sass را وارد کنیم:

// این فایل را

import "./styles.css";

// با این فایل جایگزین کنید

import "./styles.scss";

تمام! حال Create React App خواهد دانست که فایل‌های .scss شما را parse کنند و استایل‌ها را به پروژه شما اضافه کند.

استفاده و به اشتراک گذاری متغیرهای Sass

ما چگونه باید متغیرها را در میان فایل‌ها به اشتراک بگذاریم؟ ما می‌توانیم فایل‌های Sass خود را از دیگر فایل‌های Sass وارد کنیم. فرض کنید که شما یک فایل متغیرها ساخته‌اید:

variable.scss:

$primaryColor: #BADA55;

ما می‌توانیم این فایل را به مانند همیشه در یک فایل دیگر وارد کنیم:

styles.scss:

// وارد کردن از پوشه مورد نظر

@import "variables.scss";

// همچنین می‌توان به این صورت عمل کرد

// @import "./variables.scss";

h1, h2 {

  color: $primaryColor;

}

استفاده از Sass در Create React App نسخه ۲

فایل‌های Sass از پکیج‌های جداگانه

اگر می‌خواهید از هر کتابخانه جداگانه‌ای ماند Bulma یا Bootstrap استفاده کنید، دیگر نیازی نیست که کل کتابخانه CSS را وارد کنید.

با Sass در React، ما می‌توانیم فقط فایل‌هایی که نیاز داریم را وارد کنیم. اول، باید Bulma را نصب کنیم.

npm install bulma -S

اگر به گیت‌هاب Bulma در پوشه sass/ نگاه کنیم، خواهیم دید که فایل‌های .sass خود را در کجا قرار می‌دهند. دقت کنید که آن‌ها در حال استفاده از .sass هستند و ما در حال استفاده از نوع .scss هستیم. مشکلی نیست، node-sass می‌تواند هر دو را خوانده و @import کند.

با استفاده از «~»، فایل‌ها را از node_moduleها وارد کنید.

«~» به Webpack و Create React App اجازه می‌دهد بدانند که در پوشه node_modules/ به دنبال فایل‌های مورد نیاز خود بگردند. بیایید برخی از فایل‌هایی که برای برنامه خود نیاز داریم را اضافه کنیم:

styles.scss:

// import using ~

@import "~bulma/sass/utilities/_all.sass";

@import "~bulma/sass/base/_all.sass";

@import "~bulma/sass/elements/button.sass";

@import "~bulma/sass/layout/section.sass";

حال ما می‌تتوانیم از button و section در Bulma استفاده کنیم.

App.js

function App() {

  return (

    <div className="App section">

      <h1>Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

      <button className="button is-danger is-outlined">

        Hello

      </button>

    </div>

  );

}

استفاده از Sass در Create React App نسخه ۲

از آنجایی که در این روش ما فقط فایل‌هایی که نیاز داریم را وارد می‌کنیم، این روش را قادر می‌سازد تا حجم فایل‌های bundle خود را در حد ممکن کوچک نگه داریم.

نتیجه گیری و دمو

استفاده از Sass در React یک راه سریع برای پیاده‌سازی استایل‌بندی در برنامه خود است. همچنین پیشنهاد می‌شود که به راه حل‌های CSS-in-JS نگاه داشته باشیم، تا بتوانیم حتی CSS ماژولاتری در کامپوننت خود بر پایه برنامه‌های React بسازیم.

در این لینک می‌توانید دموی Sass در Create React App نسخه ۲ را بر روی CodeSandbox مشاهده کنید.

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید