Sass Introduction

<< مبحث قبلی مبحث بعدی >>

Sass چیست؟

  • Sass مخفف کلمات Syntactically Awesome Stylesheet است.
  • Sass یک افزونه (extension) برای CSS است.
  • Sass یک پیش‌پردازنده CSS است.
  • Sass با تمامی نسخه‌های CSS سازگار است.
  • Sass باعث کاهش تکرار CSS و در نتیجه صرفه‌جویی در زمان می‌شود.
  • Sass توسط Hampton Catlin طراحی و توسطNatalie Weizenbaum در سال ۲۰۰۶ برنامه‌نویسی شد.
  • Sass جهت دانلود و استفاده رایگان است.

چرا از Sass استفاده کنیم؟

فایل‌های طراحی (stylesheets) روز به روز بزرگتر، پیچیده‌تر و نگهداری از آن‌ها سخت‌تر می‌شود. در اینجا است که یک پیش‌پردازنده CSS می‌تواند کمک کننده باشد. Sass به شما امکان استفاده از امکاناتی نظیر،‌ متغیرها، قوانین تو در تو، وراثت و ... را که در CSS وجود ندارند می‌دهد.

یک مثال ساده برای درک مفید بودن Sass

فرض کنید یک وب‌سایت با سه رنگ اصلی داریم.

#a2b9bc
#b2ad7f
#878f99

چند بار نیاز دارید تا این مقادیر HEX را تایپ کنید؟ تعداد دفعات بسیار زیاد.

به جای وارد کردن مقادیر بالا به تعداد دفعات زیاد، می‌توانید از Sass کمک بگیرید و آن را به صورت زیر بنویسید:


/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
background-color: $primary_1;
}

.menu-left {
background-color: $primary_2;
}

.menu-right {
background-color: $primary_3;
}

بنابراین در هنگام استفاده از Sass اگر رنگ اصلی تغییر کند، تنها کافی است که آن را در یک مکان تغییر دهید.

Sass چگونه کار می‌کند؟

مرورگرها Sass را متوجه نمی‌شوند. بنابراین به یک پیش‌پردازنده Sass نیاز است که آن را به یک CSS استاندارد تبدیل کند.

به این فرایند transpiling گفته می‌شود. بنابراین شما باید به transpiling (یک نوع برنامه) کد Sass را بدهید و کد CSS را پس بگیرید.

transpiling اصطلاحی است که برای تبدیل یا ترجمه کد نوشته شده به یک زبان، به زبانی دیگر به کار می‌رود..

نوع فایل Sass

فایل‌های Sass دارای پسوند scss. هستند.

یادداشت نویسی در Sass

کامنت یا یادداشت نویسی در Sass به مانند CSS به شکل زیر است:

/* comment */

علاوه بر آن از کامنت گذاری به شکل // comment هم پشتیبانی می‌کند.


/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
background-color: $primary_1;
}

.menu-left {
background-color: $primary_2;
}

.menu-right {
background-color: $primary_3;
}

<< مبحث قبلی مبحث بعدی >>