یادگیری SASS در ۱۵ دقیقه

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

البته که پیش پردازنده‌های زیادی مثل Sass، Less، Stylus و PostCSS وجود دارند که هدف همه‌ی آن‌ها راحتی کار ما در استفاده از زبان CSS است. شما پس از استفاده از پیش‌پردازنده‌های CSS متوجه می‌شوید که کدهایتان خواناتر شده و نگه‌داری از آن‌ها و ایجاد تغییرات در آن‌ها در آینده نیز برایتان قابل درک‌تر و آسان‌تر خواهد شد. این اتفاقات با وجود امکاناتی مثل فانکشن‌ها و متغیرها که در اغلب پیش‌پردازنده‌ها وجود دارند، قابل لمس و دستیابی خواهند بود.

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

شروع یادگیری

مرورگرها به تنهایی توانایی درک کدهای موجود در فایل‌های Sass را ندارند و نیاز به کامپایل کردن آن‌ها به کدهای معمولی CSS دارند؛ پس ما احتیاج به ابزاری برای انجام این تبدیل که فایل .scss را به .css تبدیل کند، داریم:

• SassMeister که راحت‌ترین راه برای این کار است.
• استفاده از اپ‌های مختلف رایگان و غیر رایگان برای این کار. (برای اطلاعات بیش‌تر به اینجا بروید)
• اگر عاشق command line هستید، می‌توانید Sass را بر روی کامپیوتر خود نصب کرده و به شکل دستی کامپایل را انجام دهید.

اگر از command line می‌خواهید استفاده کنید، می‌توانید با اجرای کد زیر فایل‌های .scss را به .css کامپایل کنید:

node-sass input.scss output.css

لازم به ذکر است که Sass دو نوع متفاوت از سینتکس (قواعد نوشتاری) را ارائه می‌دهد که هر دو برای کاربران آن قابل انتخاب و استفاده هستند. Sass و SCSS. هر دوی این موارد کار یکسانی انجام می‌دهند اما به شکل‌های متفاوتی طراحی شده‌اند. SCSS کمی جدیدتر است و انتخاب مناسب‌تری به نظر می‌رسد و ما در این آموزش از آن استفاده خواهیم کرد.

متغییرها

متغییرها در پیش پردازنده‌ی Sass همانند متغییرها در دیگر زبان‌های رایج هستند و به همان شکل کاربرد دارند. در هنگام اعلان آن (declare) و تعریف کردن متغییر،‌ مقدار اولیه‌ی مشخصی در آن ذخیره می‌کنیم؛ این متغییرها و مقادیر مربوبط به آن‌ها می‌توانند هر چیزی که در CSS مورد استفاده قرار می‌گیرد باشند، اما معمولا این مقدار کد رنگ یا اسم فونت یا دیگر مقادیر مربوط به پراپرتی‌های این زبان است.

در زیر می‌توانید مثالی از متغییرها در SCSS را مشاهده کنید:

ایده‌ی استفاده از متغییرها یا variables در CSS از استفاده مجدد راحت‌تر آمده است. به عنوان مثال در بالا می‌بینیم که متغییر cool-red را ابتدا تعریف کرده‌ایم و در نتیجه در هر کجای فایل که بخواهیم از این رنگ استفاده کنیم، می‌توانیم از نام این متغییر به جای کد رنگ آن، استفاده کنیم. علاوه بر این با تغییر یک باره‌ی این کد رنگ در خطی که متغییر را تعریف کرده‌ایم، می‌توانیم تمام قسمت‌هایی که از آن متغییر استفاده می‌کنند را، تغییر رنگ دهیم.

Mixin

mixinها را نیز می‌توان به چشمclass-constructorها در دیگر زبان‌های برنامه‌نویسی در نظر گرفت. در واقع شما با ساخت mixin در حال ساخت یک آبجکت هستید که شامل چندین پراپرتی و مقادیر ست شده‌ی ‌آن پراپرتی‌ها می‌باشد. حال متوجه این موضوع هستیم که همانند ایده‌ی پشت متغییرها، از این آبجکت نیز می‌توانیم در مکان‌ها مختلف کدمان استفاده کنیم و درنهایت توانسته‌ایم از تکرار خودمان و کدهایمان، جلوگیری کنیم.

به مثال زیر نگاهی بیندازید:

کد بالا بعد از کامپایل شدن به CSS ساده، تبدیل به کد زیر می‌شود:

extend

از @extend زمانی استفاده می‌کنیم که دارای دو المنت بسیار شبیه به هم هستیم که البته تفاوت‌های جزئی با یک‌دیگر دارند.

به عنوان مثال فرض کنید دو دکمه‌ی Confirm و Cancel را داریم:

کد SCSS بالا پس از کامپایل به کد CSS زیر تبدیل می‌شود:

اگر به دو تصویر بالا خوب توجه کرده باشید، تفاوت CSS و SCSS را در استفاده از extend متوجه شده‌اید. در واقع SCSS از ترکیب کردن انتخاب‌گرها (selectors) به جای تکرار چند باره‌ی آن‌ها، بهره می‌برد.

ساختارهای تودرتو (nested)

همان‌طور که می‌دانید، در زبان HTML توسعه‌دهنده به نوشتن کد به شکل تودرتو یا nested می‌پردازد. به عبارتی دیگر در HTML ما شاهد بلاک‌هایی از کد هستیم که درون بلاک‌های دیگری قرار گرفته‌اند. CSS بر عکس HTML همیشه به شکلی بی‌نظم و پر هرج و مرج نوشته می‌شود که ایجاد تغییرات در آینده در فایل‌های CSS را دشوار می‌کند. Sass در این زمینه نیز می‌تواند به کمک ما بیاید تا کدهای ساختارمندی برای استایل دادن به فایل‌های ساختارمند HTML خود،‌ بسازیم و رابطه‌ی معنادار این دو را، در هنگام اشکال‌یابی، درک کنیم.

در زیر یک مثال از کد SCSS را مشاهده می‌کنید:

و در زیر همان کد در زبان CSS آمده است:

عملکردها (operations)

شما با استفاده از SASS می‌توانید از عملگرهای ریاضی هم استفاده کنید که این‌ کار به بهبود جریان کاری شما و کدهای CSS اتان کمک شایانی می‌کند.

 کد CSS خام نمونه‌ی بالا:

البته که قابلیت calc() نیز در CSS خام وجود دارد که به شما اجازه‌ی انجام عملیات ریاضی را می‌دهد؛ اما این عملکردها در Sass بسیار سرعت نوشتن بالاتری دارند و عملکرد باقی‌مانده (% mod) نیز اضافه شده است و می‌تواند در طیف گسترده‌تری مورد استفاده قرار گیرد.

فانکشن‌ها

Sass لیست بلند بالایی از فانکشن‌های مختلف را در اختیار توسعه‌دهندگان می‌دهد. فانکشن‌های ریاضیاتی مثل random() یا round() و یا فانکشن‌های دیگری برای اعمال تغییرات بر روی رنگ‌ها و دیگر موارد.

بیایید برای درک بهتر، یک مثال بیاوریم. در زیر فانکشن (darken($color, $amount را می‌بینید که وظیفه‌‌ی آن دادن افکت هاور تاریک کردن به المنت مورد نظر ما است.

کد بالا معادل کد CSS زیر است:

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

نتیجه‌گیری

درست‌ است که کد‌های SCSS و SASS و یا هر کد نوشته شده‌ی دیگری بر اساس قواعد یک پیش‌پردازنده‌ی CSS، در نهایت برای اجرای صحیح در مرورگر کاربران، به CSS کامپایل می‌شود؛ اما مزیت استفاده از این preprocessor ها در افزایش سرعت کدزنی شما و همچنین کاهش دشواری‌های نگه‌داری کد‌های CSS شما در آینده است. پس پیشنهاد می‌کنم به CSS تعصب نداشته باشید و از پیش‌پردازنده‌های آن به راحتی استفاده کنید.

منبع