سلام دوستان

در قسمت قبل با بوت استرپ در حد کفایت آشنا شدیم. در این قسمت نحوه شروع به کار با فریم ورک بوت استرپ و نصب نرم افزار های لازم رو با هم شروع می کنیم. بسم الله…

در مرحله اول به وب سایت بوت استرت و قسمت Getting started مراجعه می کنیم و بسته مربوط به Sass رو دانلود می کنیم. بسته ای که در تصویر زیر مشاهده می کنید.

bootsrap-dl

حالا چرا Sass رو دانلود کنیم؟! در قسمت قبل در مورد این بسته ها کمی توضیح دادیم و گفتیم توتال دیزاین با این بسته بیشتر حال میکنه البته نظر شخصی بنده هست و شاید سایر دوستان مایل به استفاده از سایر بسته ها باشند در هر حال تفاوتی نداره تنها در کد نویسی راحت تر خواهیم بود و سریع تر…

استفاده از Sass مقداری نیاز به آموزش داره که این آموزش رو در هنگام کار در هرجا لازم باشه ارائه میدیم و زمان جدا گانه ای رو برای آموزش sass نمیگذارم تا دوستان از طولانی شدن مطالب خسته نشن. مطمئن باشید ابزار مورد نیاز sass رو با هم کار میکنم و نیازی آموزش جداگانه آن نیست.

پس از دانلود بسته مروبوط به sass اونو از حالت فشرده Extract میکنیم، محتویات این فولدر در تصویر زیر نمایش داده شده است فایل های sass در فولدر assets این مجموعه قرار دارند.

bootstrap3-tutorail--saas

 

وارد فولدر assets میشیم داخل آن فولدری به نام project ایجاد می کنیم تا فایل های مربوط به قالب خودمون رو در این فولدر بنویسیم و آماده کنیم.

bootstrap3-tutorail--saas2

فایل های sass مربوط به style بوت استرپ در فولدر stylesheets قرار دارند. فرمت این فایل ها css نیست بلکه scss هست در این syntax نحوه نوشتن کد شبیه css است و تفاوت هایی که داره رو در حین آموزش یاد میگیریم و توضیحاتش ارئه میشه.

کدهای sass توسط یک کامپایلر به css تفسیر میشه و مورد استفاده در قالب های HTML قرار میگیره یعنی اینکه ما فایل های scss این syntax رو به کامپایلر میدیم و از اون خروجی با فرمت css دریافت می کنیم. به داخل فولدر stylesheets میریم و بعد از اون به فولدر bootstrap وارد میشیم، مشابه تصویر زیر فایل های sass رو مشاهده می کنید.

از این پس اگر قصد ویرایش فایل sass ی رو داشتم حواستون باشه که به این مسیر مراجعه میکنیم.

bootstrap3-tutorail-stylesheets2

فولدر mixins رو در ابتدا مشاهده می کنید که مربوط به توابع و mixin هایی هستند که توسط sass برای استفاده در بوت استرپ نوشته شده اند. (در این آموزش ها ما فرض رو بر این گذاشتیم که دوستان با مفاهیمی چون تابع و متغییر آشنایی دارند و به توضیح این موارد نمی پردازیم در غیر این صورت با یک جستجوی کوچک در گوگل می توانید با این مفاهیم آنایی پیدا کنید هرچند در طی آموزش توضیحات لازم داده میشه و نیاز به استفاده از سایر منابع رو کمرنگ تر خواهیم کرد.)

دومین فایل در این قسمت فایل bootstrap.scss است. که با یک مربع قرمز رنگ مشخص شده است ما به این فایل نیازی نداریم فایل مورد مهمی با همین نام در مسیر قبلی یعنی در فولدر stylesheets قرار داره که ما با اون فایل کار میکنیم در ادامه توضیح داده میشه پس دقت کنید از این پس هرگاه نام فایل bootstrap.scss رو آوردیم منظور فایل موجود در فولدر stylesheets هست!

توجه کنید فایل های دیگر قبل از نام خود دارای یک underline هستند! تمامی فایل هایی که دارای این underline هستند در فایل bootstrap.scss در فولدر stylesheets پیوست شده اند با استفاده از کدهایی با شکل زیر:

 به کلمه import در ابتدای کد دقت کنید از پس بجای پیوست از کلمه import استفاده می کنیم. همونطور که می بینید تمامی فایل هایی که نام آنها با underline شروع میشه در فایل bootstrap.scss ایمپورت شده اند و underline اول اسامی فایل ها به معنی اینه که فایل مخصوص ایمورت شدن در یک فایل دیگه هست. نکته قابل توجه اینجاست که compiler های زبان sass هم این فایل ها رو شناسایی میکنن که در ادامه آشنا میشیم.

برای طراحی این قالب ما حتما نیاز به یک سری کدهای اضافه داریم که باید خودمون بنویسیم. به همین دلیل یک فایل sass به نام mycodes.scss_ در کنار سایر فایل های sass در مسیر stylesheets/bootstrap ایجاد می کنیم تا از پراکندگی کدهامون در سایر فایل های scss جلوگیری کنیم. دقت کنید underline اول نام فایل mycodes رو قرار بدین چون این فایل رو باید در آخر فایل bootstrap.scss با استفاده از کد زیر import بشه. پس فایل bootstrap.scss رو با editor مورد علاقمون باز می کنیم و کد زیر رو در آخرین خط قرار میدیم.

اجازه بدین مقداری در مورد فایل bootstrap.scss توضیح بدم. این فایل توسط compiler زبان sass استفاده میشه و به فایلی با فرمت css تبدیل میشه در هر خط فایل های مربوط به یکی از ابزارهای بوت استرپ import شده است و این ایمپورت شدن فایل در این قسمت باعث فراخوانی کدهای موجود در اون فایل به داخل فایل bootstrap.scss میشه. یکی از مزیت های این روش اینه که شما شاید نیاز به استفاده یکی از ابزارهای bootstrap نداشته باشین پس به طور متقابل نیازی به وجود کدهای استایل اون ابزار در بین کدهای قالب نیست شما وقتی در این فایل دستور import کردن کدهای اون ابزار رو حذف کنید کدهای اون به داخل فایل استایل اضافه نمیشه بسیار خوبه چون باعث کاهش حجم کدهای ما میشه. البته پیشنهاد میکنم دستور import های موجود در فایل bootstrap.scss رو حذف پاک نکنید و اگر نمیخواین از کدهای یکی از ابزارهای بوت استرپ رو استفاده نکنید تنها کافیه قبل از دستور ایمپورت آن // اضافه کنید به صورت زیر:

خب دیگه تا این قسمت در حد لازم درباره sass صحبت شد میریم به سوراغ مراحل بعدی در این قسمت آموزش که عبارتند از: دانلود و نصب compiler زبان sass ، دانلود و نصب یک editor خوب اگر نصب ندارین برای ویرایش و نوشتن کدهای HTML و CSS

 

اقلام مورد نیاز برای ادامه کار:

  1. دانلود و نصب Prepros که ابزار و کامپایلری قدرتمند برای کار با زبان Sass می باشد. این نرم افزار دارای دو نسخه رایگان و pro هست که می تونید به سایتش مراجعه کنید و نسخه دلخواه خودتون رو دانلود کنید: لینک سایت Prepros

  2. دانلود و نصب یک ویرایشگر برای کار با کدهای HTML و CSS و Sass در این آموزش ما از ویرایشگر محبوب Sublime Text 2 استفاده می کنیم که بسیار حرفه ای است و پیشنهاد میکنم این ویرایشگر رو دانلود کنید پشیمون نمیشید: لینک دانلود ویرایشگر
  3. مشاهده و دریافت طرح قالب آموزشی اول وب سایت توتال دیزاین
  4. علاقه و حوصله برای پیگیری ادامه آموزش  😉

ابتدا نرم افزار Prepros و ویرایشگر Sublime Text 2 رو نصب می کنیم که نصب این دو نرم افزار رو به دوستان میسپاریم اگر مشکلی داشتیند در بخش پشتیبانی وب سایت مطرح کنید.

نرم افزار Prepros برای شروع کار نیاز به تنظیماتی داره که روند کار ما رو راحت تر کنه میحیط نرم افزار Prepros رو در تصویر زیر مشاهده می کنید.

Prepros

ما باید فایل sass مربوطه را با نرم افزار باز کنیم برای این کار می تونید از دکمه ADD NEW PROJECT در سمت چپ و پایین پنجره نرم افزار استفاده کنید و یا اینکه فایل رو با Drag کردن به داخل نرم افزار اضافه کنیم. هدف ما اضافه کردن فایل bootstrap.scss به نرم افزار Prepros است و فولدر stylesheets به داخل نرم افزار Prepros با استفاده از Drag کردم اضافه می کنیم در ضمن میتونید از دکمه ADD NEW PROJECT استفاده کنید و فولدر stylesheets رو انتخاب کنید. به تصویر زیر دقت کنید همونطور که می بینید در سمت چپ نرم افزار Prepros فولدری رو که اضافه کرده ایم مشاهده می کنید پس از افزون فولدر stylesheets دو فایل scss به نرم افزار اضافه می شود که فایل بالایی که در فولدر stylesheets/bootstrap قرار دارد را بایستی از حالت compile خودکار خارج کنیم که نحوه این کار در تصویر زیر به خوبی نمایش داده شده است. بر روی فایل دوم کلیک کرده تا پنل تنظیمات مربوط به فایل در سمت راست پنجره نرم افزار باز شود و گزینه Auto Compile را فعال می کنیم. این گزینه به ما این اجازه را می دهد هرگاه در فایل های sass تغییری ایجاد کردیم نرم افزار Prepros به صورت خودکار خروجی css را بروزرسانی می کند و نیازی نیست که ما پس از هر بار تغییر دکمه Compile این نرم افزار را بزنیم.

Prepros3

با استفاده از این نرم افزار شما می تونید چهار نوع خروجی css دریافت کنید که انواع این خروجی ها عبارتند از: Compressed, Compact, Nested, Expanded

اگر علاقه دارین متوجه تفاوت این نوع خروجی ها بشین به مثال های زیر دقت کنید:

خروجی نوع Expanded:

 

خروجی نوع Nested:

 

 

خروجی نوع Compact:

 

خروجی نوع Compressed:

 

خب به نظرم به خوبی به نوع هر خروجی پی برده باشید.  🙄 من از بین این چهار نوع خروجی استفاده از Compressed رو پیشنهاد میکنم چون در این نوع کدها به صورت فشرده و پی در پی نوشته شده اند که باعث کم حجم شدن فایل css و در نتیجه افزایش سرعت بارگزاری قالب وب سایت میشه.

خب پس از این باید مسیر ذخیره شدن خروجی نرم افزار رو مشخص کنیم یعنی تعیین کنیم فایل css خروجی کجا ذخیره بشه برای این امر بر روی فایل scss دوم که فایل اصلی ما هست کلیک راست کرده و گزینه Change Output رو انتخاب می کنیم، در پنجره باز شده مسیر ذخیره فایل css رو در فولدر project که فایل های پروژه قرار در این مسیر ذخیره بشه تعیین می کنیم. نام فایل خروجی رو style.css تعیین کنید و سپس دکمه save رو بزنید. پس از این کار برای اولین بار دکمه compile نرم افزار رو میزنیم تا فایل style.css ساخته بشه و از این به بعد چون تیک Auto Compile روشن هست نیازی به compile مجدد نیست.

هربار که compile با موفقیت انجام بشه در گوشه دسکتاپ سمت راست شکل زیر رو مشاهده می کنید و اگر شما در کد خودتون خطایی داشته باشید مثلا اشتباهی در کدهای sass رخ داده باشه تصویر پایین نمایش داده میشه پس در صورت مشاهده هر کدوم از تصاویر به کدنویسی صحیح و یا اشتباه خودتون پی می برید برای رفع خطا باید آخرین قسمت هایی از کد رو که اضافه کردین بررسی کنید.

Prepros-comile

تا این بخش تنظیمات نرم افزار Prepros به پایان رسید و میریم به سراغ نصب و راه اندازی نرم افزار ویرایشگر Sublime Text 2 که کمک خوبی قراره در طی پروژه برامون باشه.

میریم به سراغ تصویر و طرح قالبی رو که قصد داریم در قالب پروژه در این آموزش آماده کنیم میتونید در بخش نمونه کارها مشاهده کنید: لینک تصویر قالب

تا اینجا نرم افزارهای لازم رو نصب کردیم و طرح اولیه قالب رو هم دیدم برای اینکه مطالب آموزشی هر پست طولانی و خسته کننده نشه ادامه آموزش رو میذاریم برای جلسه با موضوع نحوه Grid بندی در Bootstrap آماده سازی اولیه فایل index قالب  🙂

پایان قسمت دوم آموزش