خانه (Home)

در آموزش Sass با یک افزونه CSS آشنا می شوی. «پیش پردازنده (Pre-processor)» یعنی ابزاری که کد را قبل از اجرا آماده می کند. Sass تکرارها را کم می کند و سرعت تو را بالا می برد. مثل زمانی که تکالیف را با الگو می نویسی و زمان می گیری.

Sass چیست و چرا مفید است؟

Sass روی CSS می نشیند و امکانات می دهد. «متغیر (Variable)» رنگ و اندازه را یک جا نگه می دارد. سپس همه جا از همان مقدار استفاده می کنی. بنابراین تغییرات سریع و منظم انجام می شود.

مزیت های روزمره

کدت تمیزتر می شود. تغییر رنگ سراسری ساده می شود. اندازه ها هماهنگ می مانند. دیباگ راحت تر می شود. تیم سریع تر هماهنگ می شود.

مثال سریع با متغیرها در Sass

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

مشاهده در ادیتور

نکته: اگر رنگ پایه را عوض کنی، همه جا فوری تغییر می کند. این یعنی یک منبع حقیقت برای طراحی داری.

شروع سریع در 3 گام

1. یک پروژه ساده بساز.
2. فایل .scss ایجاد کن و متغیرها را تعریف کن.
3. کد Sass را به CSS کامپایل کن و نتیجه را ببین.

برای ادامه مسیر، صفحه آموزش Sass را ببین. همچنین درباره متغیرهای Sass بیشتر بخوان.

جمع بندی سریع

• Sass یک پیش پردازنده برای CSS است.
• با متغیرها، تغییرات سریع تر می شود.
• کد تمیزتر و قابل نگهداری تر می شود.
• وقت کمتری برای تکرارها می گذاری.