آموزش پیش پردازنده Sass – بخش دوم

توی مقاله قبلی در مورد مقدمات و معرفی Sass ، تا یه حدی با این ابزار آشنا شدیم. توی این مطلب، بیشتر عمیق میشیم و رسما آموزش Sass رو شروع میکنیم.

این پیش پردازنده، هم یه ابزاره، که با استفاده از اون میشه فایل های CSS رو باهاش ساخت، و هم یه زبانه، که ویژگی های جدیدی رو به CSS اضافه میکنه.

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

فایل های SCSS

زمانی که با Sass کار میکنید، در حقیقت با دو نوع فایل سر و کار دارید:

1. فایل هایی که در اونها کدهای Sass رو می نویسید و فرمت اونها scss هست
2. فایل هایی که کامپایلر Sass تولید میکنه که در حقیقت همون فایل نهایی با فرمت css هست

نکته کلیدی موقع کار با Sass، اینه که هیچوقت خودتون فایل های سی اس اس رو ویرایش نکنید، چون ممکنه اونها رو طوری تغییر بدید که ظاهر سایتتون رو بهم بریزه.

توصیه من اینه که کدهاتون رو توی فایل های Sass بنویسید و تهیه خروجی نهایی رو به عهده پیش پردازنده بذارید.

شروع به کار با Sass

از اونجایی که از این به بعد، با دو نوع فایل روبرو میشیم، بهترین کار اینه که اونا رو توی دوتا پوشه جداگانه در سایتتون قرار بدید، یکی برای فایل های SCSS و اون یکی برای فایل های CSS.

قاعدتا میتونید هر اسمی که دوست دارید روی این فولدرها بذارید، اما معمولا فایل های مربوط به پیش پردازنده رو در پوشه ای به اسم Sass یا Scss میذارن.

داخل این پوشه، یه فایل Sass میسازید و اون رو نام گذاری میکنید. توجه داشته باشید که هر اسمی که روی اون بذارید، فایل CSS نهایی هم همون اسم رو خواهد داشت.

مثلا اگه شما فایل Style.scss رو بسازید، خروجی نهایی تبدیل میشه به Style.css

ویژگی Watch در Sass

در این پیش پردازنده، یه ویژگی و ابزار خوب وجود داره که کمک میکنه کوچکترین تغییری، به سرعت توی فایل نهایی اعمال بشه و شما بتونید در همون لحظه که کدها رو می نویسید، تغییرات رو در سایت مشاهده کنید.

این ویژگی Watch نامیده میشه و با استفاده از اون، Sass با دقت تمام فایل های شما رو زیر نظر میگیره و خیلی سریع، بعد از هر تغییر، فایل سی اس اس نهایی رو مجددا میسازه و تغییر میده.

از اونجایی که من از VS Code و افزونه Live Sass Compiler استفاده میکنم، میتونم بدون درگیر شدن با کامند لاین، Sass رو به حالت Watch ببرم.

در محیط VS Code، پس از اینکه Live Sass Compiler رو نصب کردید، با زدن دکمه F1 و تایپ عبارت Live Sass: Watch Sass، میتونید این ویژگی رو فعال کنید. عکس پایین هم میتونه راهنمایی تون کنه.

سازمان دهی فایل های استایل با استفاده از Sass

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

البته خیلی سخت نیست که برای یه سایت، صدها یا حتی چند هزار خط استایل بنویسیم، اما مشکل اساسی، مدیریت کردن این کدهاست ( قبلا هم توی قسمت اول آموزش Sass به این موضوع مفصل اشاره کرده بودم )

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

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

بنابراین، حتی اگه دوست نداشته باشین جزئیات فرمان های Sass رو یاد بگیرید، همین یک ویژگی میتونه دلیل باشه که به جای استفاده از فایل های CSS معمولی، از Sass استفاده کنید.

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

به بخش های فایل Sass که کدهای قسمت های مختلف سایت رو نگهداری میکنن، اصطلاحا Partials ( بخش ها، قسمت ها) گفته میشه و برای استفاده از اونها، باید از یک قاعده نامگذاری خاص استفاده کنید.

برای اینکه به Sass بفهمونید که فایل های Partials، قرار نیست یه استایل جداگانه باشن و باید وارد فایل نهایی و اصلی CSS بشن، باید اسم این بخش های رو با کاراکتر underscore ( _ ) یا همون آندرلاین خودمون شروع کنید.

برای مثال، فرض کنیم که شما میخواین استایل های سایتتون رو به چهار بخش تقسیم کنید تا در آینده، ویرایش و مدیریت اونها راحت تر باشه. پس باید این بخش ها رو، به شکل زیر نام گذاری کنید:

۱. _reset.scss
۲. _grid.scss
۳. _layout.scss
۴. _forms.scss

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

فراخوانی Partials در Sass

برای استفاده از فایل های جزئی در Sass، ما از یه دستور ساده استفاده میکنیم:

@import

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

@import ‘_reset.scss’;

@import ‘_grid.scss’;

@import ‘_layout.scss’;

@import ‘_forms.scss’;

کدهای بالا رو باید در فایل اصلی styles.scss ( یا هر فایل دیگه ای که خودتون اسمش رو انتخاب کردید ) قرار بدید. Sass متوجه میشه فایل styles.scss با underscore ( _ ) شروع نشده و در نتیجه، فایل اصلیه و خروجی نهایی قراره از همین فایل گرفته بشه.

نکته جالب اینجاست که Sass کار عجیب و غریبی انجام نداده، فقط کدهای موجود در Partials رو در فایل اصلی کپی میکنه، و بهتون امکان میده که فایل های استایل رو مرتب و منظم نگه دارید.

علاوه بر این، ترتیب ورود این کدها به فایل اصلی، کاملا بستگی به ترتیب قرار دادن فرمان ها توسط شما داره و از بالا به پایین شروع میشه. مثلا در مثال بالا، اول از همه کدهای فایل _reset.scss وارد میشه، بعد _grid.scss و به همین ترتیب پیش میره.

نکته مهم بعدی، اینه که شما میتونید ۴ خط کد بالا رو، حتی به شکل خلاصه تر هم بنویسید:

@import ‘reset’;

@import ‘grid’;

@import ‘layout’;

@import ‘forms’;

Sass در مورد فایل های Partials کاملا هوشمند عمل میکنه و میتونه تشخیص بده که شما چی میخواین و اون کدها رو به فایل نهایی شما اضافه میکنه.

مرتب کردن Partials

نحوه دسته بندی فایل های Partials به نظم سایت شما و راحتتر شدن مدیریت کدها خیلی کمک میکنه. برای مثال، طرح پایین، یکی از دسته بندی های متداول برای مرتب کردن این فایل هاست.

sass/

|

|– helpers/فایل های ویژه               

|         |– _variables.scss

|         |– _mixins.scss

|

|– base/   فایل های پایه ای                

|         |– _reset.scss

|         |– _grid.scss

|         |– _typography.scss

|

|– layout/ استایل های بخش های مختلف              

|          |– _header.scss

|          |– _footer.scss

|          |– _sidebar.scss

|          |– _forms.scss

|

|– components/ استایل های ویژه           

|           |– _buttons.scss

|           |– _dropdown.scss

|           |– _navigation.scss

|

– styles.scss    فایل اصلی           

همون طور که توی ساختار درختی بالا می بینید، در پوشه اصلی Sass، یه فایل styles.scss داریم که فایل اصلی ما محسوب میشه ( توی بخش قبلی درمورد توضیح دادم )

علاوه بر اون، ۴ تا پوشه دیگه در پوشه Sass وجود داره که کمک میکنه فایل هاتون رو دسته بندی کنید و داخل هر پوشه، چند فایل SCSS هست که شامل کدهای استایل میشه و برای استفاده از اونها، باید با استفاده از فرمان @import اونها رو در فایل اصلی وارد کنید.

برای مثال، نحوه وارد کردن فایل هایی که در اون ساختار درختی نشون دادم، به این شکله:

@import ‘helpers/variables’;

@import ‘helpers/mixins’;

@import ‘base/reset’;

@import ‘base/grid’;

@import ‘base/typography’;

@import ‘layout/header’;

@import ‘layout/footer’;

@import ‘layout/sidebar’;

@import ‘layout/forms’;

@import ‘components/buttons’;

@import ‘components/dropdown’;

@import ‘components/navigation’;

در رابطه با این موضوع، چند تا نکته مهم رو باید اضافه کنم:

1. برای وارد کردن فایل هایی که درون پوشه هستن، باید ابتدا اسم پوشه رو بنویسید و بعد اسم فایل رو! بینشون هم باید از اسلش ( / ) استفاده کنید.
2. همونطور که قبلا هم گفتم، میتونید آندرلاین و پسوند فایل ها رو نذارید.
3. دسته بندی بالا، فقط یه مثال بود که شیوه کار رو متوجه بشید. طبیعیه که میتونید هر طوری که دوست دارید دسته بندی فایل ها رو انجام بدید.
4. با توجه به سابقه معلمی که داشتم، باید اشاره کنم که اگه سوالی براتون پیش اومد، توی کامنت ها میتونید بپرسید 😊

ادامه آموزش رو توی قسمت سوم میتونید پیگیری کنید.