بوت استرپ چیست

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

فایل های SCSS

در مجموعه بوت استرپ که توسط شرکت توییتر ارائه شده است، فایل هایی با پسوند SCSS وجود دارند. در واقع این فایل ها، سورس بوت استرپ می باشند. این مجموعه در پوشه SCSS در محل اصلی مجموعه بوت استرپ قرار دارد که شامل منوها، جداول، متغیرها، فرم ها و تمام عناصری که در فایل CSS بوت استرپ استفاده شده است. بوت استرپ در فایلی به نام bootstrap.scss تمامی فایل های SCSS را بارگذاری کرده و با استفاده از روش هایی، این فایل ها را به یک فایل با نام bootstrap.css کامپایل می کند.

دلایل کامپایل کردن فایل های SCSS بوت استرپ به CSS

روش هایی برای کامپایل کردن فایل های SCSS به CSS وجود دارد که قبل از آن باید دلیل کامپایل را بدانیم. نکات زیادی در این زمینه قابل بحث است که در زیر به مهمترین آنها اشاره می کنیم:

  • عدم استفاده از تمام المان های بوت استرپ در وب سایت
  • حجم بالای فایل bootstrap.css
  • عدم امکان ترکیب با فایل های css دیگر به دلیل حجم بالا
  • افزایش سرعت بارگذاری صفحات وب
  • بهبود امتیاز سئو و رتبه بهتر در نتایج جستجو
  • امکان سفارشی سازی، فارسی سازی و استفاده در پروژه های مختلف

 برای انجام این کار، روش های زیادی وجود دارد که در این مقاله قصد داریم بهترین روش ها را ذکر کنیم تا صفحه وب ما علاوه بر سرعت مناسب از امتیاز سئو خوبی نیز بهره مند شود.

روش های کامپایل فایل های SCSS به CSS

    روش اول - استفاده از نرم افزار کوالا: کوالا نرم افزاری تحت ویندوز می باشد که توسط آن می توانید فایل های SCSS را به CSS تبدیل کنید. پس از دریافت و نصب این نرم افزار، فایل bootstrap را در نرم افزار باز کرده، سپس روی آن راست کلیک کرده و گزینه Set Output Path را انتخاب کنید و آدرس فایل Bootstrap.css را به نرم افزار بدهید. از این پس هر تغییری در فایل Boostrap.scss بدهید، پس از کلیک بر روی دکمه Compile، تغییرات اعمال شده و فایل Bootstrap.scss به Bootstrap.css کامپایل می شود. برای توضیحات بیشتر می توانید فیلم آموزش کامپایل را در ابتدای همین مقاله مشاهده کنید. 

در فایل Bootstrap.scss تمامی فایل های import شده اند که از این طریق می توانید فایل هایی که به آنها نیازی ندارید را از لیست حذف کرده و یا فایلی جدید import کنید.

    روش دوم - پلاگین WP-SCSS: اگر از سیستم مدیریت محتوای وردپرس استفاده می کنید، برای انجام این کار یک پلاگین وجود دارد که آدرس فایل های CSS و SCSS را میگیرد و عملیات کامپایل را پس از هر تغییر انجام می دهد. 

   روش سوم - استفاده از Elixir : سرویس Elixir در چارچوب نرم افزاری لاراول با ارائه ی API های کارامد و بهینه به شما این امکان را می دهد تا علاوه بر کامپایل فایل های SCSS به CSS بتوانید فایل های CSS را به صورت بهینه Minify کنید. نکته ای که در مورد Laravel Elixir وجود دارد این است که قبل از نصب و استفاده از آن باید Node.js را بر در پروژه خود نصب کنید.


امیدوارم از مطالب فوق استفاده کرده باشید. اگه سوالی داشتید میتونید کامنت بزارید.