Sass چیست؟ این سوالی است که ما در اینجا به آن پاسخ می دهیم. اگر در زمینه طراحی وب تازه کار هستید، احتمالاً این اصطلاح را شنیده اید، اما ممکن است در مورد اینکه Sass دقیقاً چیست، چه کاری انجام می دهد و اینکه آیا باید از آن استفاده کنید یا نه، کاملاً مطلع نباشید. به طور خلاصه، Sass یک پیش پردازشگر CSS است که ویژگی‌های خاصی مانند متغیرها، قوانین تودرتو و میکسین‌ها (گاهی اوقات به عنوان قند سینتکس نامیده می‌شود) را به CSS معمولی اضافه می‌کند. هدف این است که فرآیند کدنویسی، ساده تر و کارآمدتر شود. حال بیایید با جزئیات بیشتر بررسی کنیم.

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

پیش پردازنده CSS یک زبان برنامه نویسی است که CSS را گسترش می دهد با اجازه دادن به توسعه دهندگان برای نوشتن کد به یک زبان (Sass) و سپس کامپایل آن در CSS. شاید محبوب ترین پیش پردازنده CSS در حال حاضر Sass باشد، اما نمونه های شناخته شده دیگری نیز وجود دارند که عبارتند از Less و Stylus.

قبل از اینکه جلوتر برویم، یک اطلاع عمومی سریع لازم است: اکثر طراحان وب می گویند که اگر در CSS  تازه کار هستید، بهتر است از Sass (یا هر پیش پردازشگر، برنامه افزودنی یا فریمورک) هنگامیکه هنوز در حال یادگیری CSS هستید، خودداری کنید. در حالی که درست است که آنها مزایای زیادی در سرعت و کارایی دارند، مهم است که شما واقعاً با اصول CSS آشنا شوید. قبل از شروع کاوش میانبرها و چیزهای گیج کننده، مطمئن شوید که مفاهیم اصلی را یاد گرفته اید.

Sass چیست؟

Sass که مخفف عبارت (Syntactically Awesome style sheets) است، یک برنامه افزودنی از CSS است که به شما امکان می دهد از مواردی مانند متغیرها، قوانین تودرتو، واردات درون خطی و موارد دیگر استفاده کنید. همچنین به سازماندهی چیزها کمک می کند و به شما امکان می دهد سریعتر استایل شیت ایجاد کنید.

Sass با تمام نسخه های CSS سازگار است. تنها شرط لازم برای استفاده از آن این است که باید Ruby را نصب کرده باشید. همچنین از کاربران خواسته می شود دستورالعمل های انجمن Sass را دنبال کنند.

نحوه استفاده از  Sass

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

سینتکس

Sass شامل دو گزینه نحوی است:

• SCSS (Sassy CSS): از پسوند فایل scss. استفاده می کند و کاملاً با سینتکس CSS سازگار است.
• تورفتگی (به سادگی “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;
}

جزئی ها (Partials)

جزئی ها فایل های Sass کوچکتری هستند که می توانند به سایر فایل های Sass وارد شوند (به بخش بعدی مراجعه کنید). جزئی را به عنوان قطعه کد در نظر بگیرید. با استفاده از این تکه‌های کد،CSS  شما اکنون می‌تواند ماژولار باشد و نگهداری آن آسان‌تر باشد. یک جزئی با نامگذاری آن با زیرخط پیشرو به این صورت مشخص می شود:  partial.scss_

وارد كردن (Import)

دستورالعمل @import که با Partials استفاده می شود (به بخش قبلی مراجعه کنید)، به شما امکان می دهد فایل های جزئی خود را به فایل فعلی وارد کنید تا یک فایل CSS بسازید. توجه داشته باشید چه تعداد import استفاده می کنید، زیرا برای هر یک از import ها، یک درخواست HTTP ایجاد می شود.

// _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;
}

توجه: هنگام وارد کردن جزئی ها، نیازی به اضافه کردن پسوند فایل یا زیرخط ندارید.

ترکیبی ها (Mixins)

یکی از مزایای استفاده از پیش پردازنده ها توانایی آنها در گرفتن کدهای پیچیده و طولانی و ساده کردن آن است. اینجاست که میکسین ها به کار می آیند!

به عنوان مثال، اگر شما نیاز به اضافه کردن پیشوندهای مختلف مرورگرها دارید، می توانید به جای آن از یک mixin  استفاده کنید. به این مثال برای border-radius نگاه کنید:

@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 داده شده است و از متغیر radius$ به عنوان پارامتر خود استفاده می کند. این متغیر برای تعیین مقدار شعاع برای هر عنصر استفاده می شود.

بعداً دستور include@ به همراه نام mixin (border-radius) و یک پارامتر (10px) فراخوانی می شود. بنابراین: box { @include border-radius(10px); }.

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

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

گسترش / ارث بردن (Extend / Inheritance)

دستورالعمل extend@ یکی از قدرتمندترین ویژگی های Sass نامیده می شود. پس از مشاهده آن در عمل، دلیل آن مشخص می شود.

ایده این است که با استفاده از این دستورالعمل، شما مجبور نخواهید بود نام چندین کلاس را در عناصر HTML خود قرار دهید و می توانید کد خود را DRY نگه دارید (خودتان را تکرار نکنید / don’t repeat yourself). انتخابگرهای شما می‌توانند سبک‌های انتخابگرهای دیگر را به ارث ببرند، و سپس در صورت لزوم به راحتی قابل گسترش باشند. حالا می بینید که قدرتمند است.

اپراتورها

داشتن توانایی انجام محاسبات در CSS به شما امکان می دهد کارهای بیشتری انجام دهید، مانند تبدیل مقادیر پیکسل به درصد. شما به توابع ریاضی استاندارد مانند جمع، تفریق، ضرب و تقسیم دسترسی خواهید داشت. البته، این توابع را می توان برای ایجاد محاسبات پیچیده ترکیب کرد.

علاوه بر این، Sass شامل چند توابع داخلی برای کمک به کار با اعداد است. توابعی مانند ()%، ()floor و ()round ، جهت نام بردن برخی از این توابع.

ترجمه: ابوالفضل محمدی جو

منبع:

https://www.creativebloq.com/web-design/what-is-sass-111517618