Sass چیست؟

Sass چیست و چرا باید از آن استفاده کنیم؟ این سوالات اصلی هستند که قصد داریم امروز به آن‌ها در این مطلب پاسخ دهیم. اما قبل از اینکه وارد جزئیات ماجرا شویم، خوب است که بدانید در وبسایت راکت «آموزش کامل sass» به صورت رایگان در اختیار کاربران قرار دارد که می‌توانند از آن نیز استفاده کنند. 

اگر به تازگی وارد دنیای طراحی وب شده‌اید مطمئنا نام Sass یا پیش‌پردازنده‌ها را شنیده‌اید. اگر مطمئن نیستید که Sass چیست و نمی‌دانید که باید از آن استفاده کنید یا خیر، ما امروز قصد داریم به شما کمک کنیم.

به صورت کوتاه Sass یک پیش‌پردازنده CSS است، پیش‌پردازنده Sass کمک می‌کند تا ما از ویژگی‌های منحصر به فردی در داخل CSS استفاده کنیم. ویژگی‌هایی مانند متغیرها، قواعد تو در تو و موارد مختلف دیگر. هدف استفاده از این موارد این است که بتوانیم روند کدنویسی را ساده‌تر و مؤثرتر کنیم. بیایید با جزئیات بیشتر به آن نگاه کنیم.

پیش‌پردازنده CSS چیست؟

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

اگر در دنیای CSS تازه‌کار هستید پیشنهاد می‌شود که فعلا به سراغ پیش‌پردازنده‌ها نروید. چنین موضوعی برای پلاگین‌ها و فریمورک‌ها نیز صادق است. با این وجود که آن ها باعث می‌شوند تا سرعت و کارایی بالایی داشته باشید اما مهمتر از آن این است که درک بسیار خوبی از موارد پایه‌ای و کلی CSS پیدا نمایید. همواره سعی کنید که قبل از میانبر زدن اصل قضیه را به خوبی درک کنید.

Sass چیست؟

Sass (Syntactically Awesome Style Sheets) یک پیش‌پردازنده است که CSS را قادر می‌سازد تا از مواردی مانند متغیرها، تودرتونویسی، inline import و موارد مختلف دیگری استفاده کند. در حقیقت Sass مانند یک اکستنشن برای CSS عمل می‌کند. Sass کمک می‌کند که همه چیز را سازمان‌دهی شده نگه داریم و فایل‌های استایل‌شیت را با سرعت بیشتری ایجاد کنیم.

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

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

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

سینتکس

Sass دارای دو گزینه سینتکس است:

1. SCSS (Sassy CSS): استفاده از فایل با فرمت .scss که سازگاری بالایی با سینتکس CSS دارد.
2. دندانه‌دار (همان Sass): از فرمت .sass استفاده می‌کند و به صورت دندانه‌ای است -برخلاف حالت }{-. این مورد نیز به با CSS سازگاری دارد و نوشتن آن سریع‌تر است. 

نکته اینجاست که می‌شود هر دو سینتکس را با استفاده از دستور sass-convert به همدیگر تبدیل کرد.

متغیرها

درست مانند دیگر زبان‌های برنامه‌نویسی Sass نیز به شما اجازه می‌دهد که بتوانید متغیرهایی را تعریف کرده و اطلاعاتی را در آن‌ها قرار دهید. برای مثال می‌توانید مقدار یک رنگ را در یک متغیر قرار داده و در برنامه چندین بار از آن‌ استفاده کنید. این موضوع کمک می‌کند که بتوانید به سرعت تنها با تغییر یک قسمت (متغیر) رنگ‌ المان‌های مختلف را تغییر دهید.

مثال:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

کد CSS زیر تولید می‌شود:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

تودرتو نویسی

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

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

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

خروجی CSS به صورت زیر خواهد بود:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partialها

Partialها فایل کوچک Sass هستند که قابلیت import شدن در دیگر فایل‌های Sass را مهیا می‌کنند. با استفاده از این حالت شما می‌توانید فایل‌های CSS ماژولاری داشته باشید که نگه‌داری و دیباگ‌ کردن آن‌ها ساده‌تر است. یک Partial به این صورت نام گذاری می‌شود: _partial.scss

Import

با استفاده از دستور @import می‌توانید Partialهایی که در بالا گفته شد را به کدها اضافه کنیم. این کار با استفاده از یک Http Request انجام می‌شود. 

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// basefile.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

در نهایت خروجی CSS:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixin

یکی از مزیت‌های استفاده از پیش‌پردازنده وجود قابلیت ساده کردن کدهای پیچیده است. منظورمان دقیقا استفاده کردن از Mixinها است. بری مثال در حالتی که می‌خواهیم از پیشوندهای پشتیبانی مرورگر استفاده کنیم می‌توانیم به سادگی به صورت زیر عمل نماییم:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

به @mixin در بالای کدها توجه کنید. border-radius نامی است که این mixin ما دارد و در داخل خود یک پارامتر دریافت می‌کند. مقدار متغیر $radius در واقع همان پارامتری است که کاربر وارد می‌کند. 

در نهایت با استفاده از @include می‌توانید mixin‌ نوشته شده را اعمال کنید.

خروجی CSS به صورت زیر خواهد بود:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

توسعه/ارث‌بری

از دستورالعمل @extend تنها یک بار در فایل Sass استفاده می‌شود. بعد از دیدن ویژگی فوق العاده آن متوجه چرایی آن می‌شوید.

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

عملگر

داشتن قابلیت انجام عملیات‌ها مطمئنا می‌تواند قابلیت‌های بسیار بیشتر دیگری را به شما بدهد. برای مثال می‌توانید مقادیر پیکسل را به درصد تبدیل کنید. شما در این حالت به توابع استاندارد ریاضی مانند جمع، تفریق، ضر و تقسیم دسترسی دارید. البته باید گفت که این توابع قابلیت ترکیب شدن با همدیگر و ایجاد محاسبات پیچیده‌تر را نیز دارند. 

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

مقایسه CSS با Sass

CSS (Cascading Style Sheets) و SASS (Syntactically Awesome Stylesheets) هر دو برای تعریف چگونگی نمایش عناصر در صفحات وب استفاده می‌شوند، اما بین آن‌ها تفاوت‌های قابل توجهی وجود دارد. در حالی که CSS یک زبان استایل شیت است که مستقیماً توسط مرورگرها خوانده می‌شود، SASS یک پیش‌پردازنده CSS است که امکانات و قابلیت‌های بیشتری را نسبت به CSS خام فراهم می‌آورد. در ادامه به مقایسه مهم‌ترین جنبه‌های این دو می‌پردازیم:

سینتکس (Syntax)

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

قابلیت‌ها

• CSS: امکانات محدودتری دارد و از قابلیت‌های پیشرفته مانند متغیرها، تودرتویی و وراثت به طور مستقیم پشتیبانی نمی‌کند.
• SASS: ویژگی‌های پیشرفته‌ای مانند متغیرها، تودرتویی، میکسین‌ها، وراثت و فانکشن‌ها را ارائه می‌دهد که به بهبود قابلیت نگهداری و توسعه‌پذیری کد کمک می‌کند.

مدیریت پروژه

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

سرعت توسعه

• CSS: می‌تواند برای توسعه‌دهندگان که با سینتکس آن آشنایی دارند سریع باشد، اما در پروژه‌های بزرگ ممکن است کند شود.
• SASS: با ارائه ویژگی‌هایی که به سرعت بخشیدن به توسعه کمک می‌کنند، می‌تواند در پروژه‌های بزرگ سرعت بخشیدن به توسعه را فراهم آورد.

یادگیری و پیچیدگی

• CSS: نسبتاً ساده‌تر برای یادگیری است، زیرا فاقد ویژگی‌های پیچیده پیشرفته است.
• SASS: ممکن است ابتدا پیچیده به نظر برسد، به خصوص برای تازه‌کاران، به دلیل ویژگی‌های پیشرفته‌ای که ارائه می‌دهد. با این حال، این ویژگی‌ها به توسعه‌پذیری و نگهداری بهتر کد کمک می‌کنند.

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

این‌ها کلیاتی از دنیای Sass بود. برای آشنایی بیشتر با Sass می‌توانید دوره رایگان «آموزش کامل sass» در وبسایت راکت را مشاهده کنید.