لطفا صبر کنید ...

استفاده از Sass در Create React App v2

الهه قنبری

توسط الهه قنبری

مدیر
دیدگاه ها: 0
بازدید ها : 102
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در این مقاله از لیداوب درباره نحوه استفاده از Sass در Create React App مورد بررسی قرار می‌دهیم. با ما همراه باشید.


 Sass این امکان را به ما می‌دهد که بتوانیم از ویژگی‌های منحصر به فردی در زبان CSS استفاده کنیم. هدف استفاده از Sass  این است که بتوانیم روند کدنویسی را ساده‌تر و مؤثرتر کنیم.

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

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

مطالعه بیشتر:

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

مراحل استفاده از Sass در Create React App عبارتند از:

  • نصب node-sass با دستور npm install node-sass
  • تبدیل فایل‌های .css به .scss
  • تغییر ایمپورت‌ها برای استفاده از .scss

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

// replace import "./styles.css"; // withimport "./styles.scss";

اکنون، Create React App می‌داند که فایل‌های .scss شما را تجزیه کند و استایل‌ها را به پروژه شما اضافه کند.

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

چگونه می‌توانیم متغیرها را درون فایل‌ها به اشتراک بگذاریم؟ ما می‌توانیم فایل‌های Sass خود را از دیگر فایل‌های Sass ایمپورت کنیم. مثال زیر را در نظر بگیرید، ما یک متغیر فایل ایجاد می‌کنیم:

 variables.scss

$primaryColor: #BADA55;

 می‌توانیم این متغیر را در داخل یک فایل دیگر به صورت زیر ایمپورت کنیم.

styles.scss

// import starting from the src/ folder
@import "variables.scss";

// can also be relative import
// @import "./variables.scss";

// we can use the $primaryColor variable now
h1, h2 {
  color: $primaryColor;
}

 

استفاده از sass در لاراول

فایل‌های Sass در پکیج‌های 3rd Party

اگر بخواهیم از هر کتابخانه 3rd Party  مانند Bulma یا Bootstrap استفاده کنیم، در این صورت، نیازی به ایمپورت کردن کل کتابخانه CSS نداریم.

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

npm install bulma -S

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

 ایمپورت کردن فایل‌ها از node_modules با استفاده از ~ انجام می‌گیرد.

~   به 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 را استفاده کنیم.

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 در react

این روش به ما این امکان را می‌دهد که اندازه بسته‌های CSS خود را تا حد ممکن کوچک نگه داریم زیرا فقط چیزهایی را که نیاز داریم را ایمپورت می‌کنیم.

مطالعه مقاله مرتبط در لیداوب:

دموی نمایشی استفاده از Sass در React

استفاده از Sass در React یک راه سریع برای به دست آوردن یک استایل خوب برای برنامه شما است. همچنین، توصیه می شود از روش‌های CSS-in-JS استفاده کنید که از طریق آن‌ها می‌توانیم modular CSS بیشتری را در برنامه‌های React مبتنی بر کامپوننت‌های خود ایجاد کنیم.

در اینجا CodeSandbox با دموی نمایشی Sass در Create React App 2 را مشاهده می‌کنید:

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

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های