آموزش Sass [ قسمت صفر ]

  • آخرین بروزرسانی در پنج‌شنبه 24 سپتامبر 2020

    Average rating 5 / 5. Vote count: 1

استایل شیت ها یا همان فایل های استایل پروژه هایمان به مرور که شروع به توسعه پروژه می کنیم، گسترده تر می شوند و بخشی از دلیل آن این است که ناچاریم یک سری کد تکراری را در هر سلکتوری تکرار کنیم. Sass این مشکل را حل می کند و شما می توانید با استفاده از این آموزش که به همراه مثال است از مزایای آن بهره مند شوید!

Sass کوتاه شده عبارت Syntactically Awesome Stylesheet به معنای شیوه نامه فوق العاده از نظر نحوی است.

با استفاده از آن می توانید کار هایی که در CSS شدنی نیست مثلا تعریف متغیر، قوانین تو در تو، تعریف قوانین ثابت (mixin)، ارث بری، استفاده از توابع و… را انجام دهید.

پیش نیاز آموزش Sass

پیش از این که آموزش Sass را دنبال کنید، می بایست آشنایی نسبی با موارد زیر داشته باشید.


یک سری نکات مهم درباره آموزش Sass

  • Sass یک افزونه برای CSS به حساب می آید
  • Sass یک پیش پردازنده CSS است.
  • Sass با تمامی نسخه های CSS سازگار است.
  • Sass باعث کاهش تکرار کد در CSS می شود بنابراین زمان کمتری از توسعه دهنده می گیرد.
  • Sass به صورت رایگان قابل دانلود و استفاده است.

یک مثال ساده از کاربرد Sass

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

#a2b9bc

#b2ad7f

#878f99

در این صورت در CSS چند بار باید از این مقادیر HEX استفاده کنیم؟ خیلی!!

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

کد 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 می گویند.

در این صورت شما باید به یک transpiler (یک نوع نرم افزار) کد Sass بدید تا به شما کد CSS معادل آن را تحویل بدهد.

نکته : Transpiling عبارتی هست که بیانگر تبدیل سورس کد نوشته شده به یک زبان به زبان دیگر هست.

نوع فایل Sass

فایل های Sass با فرمت scss ذخیره می شوند.

کامنت در Sass

علاوه بر شیوه کامنت نویسی استاندارد CSS امکان استفاده از کامنت درون خطی (Inline) در Sass وجود دارد.

مثال

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* use the variables */
.main-header {
  background-color: $primary_1; // here you can put an inline comment
}

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

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

برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!

دیدگاه خود را بیان کنید

@