دانلود ویدیو

 Sass یا Less پیش‌پردازنده‌هایی هستند که می‌توانند به شما کمک کند تا Stylesheet تان را ماژولار کنید و یا تابع‌هایی را به آن اضافه کنید که در CSS وجود ندارند.

شروع کار با آن بسیار ساده‌تر از چیزی است که تصور می‌کنید. بنابراین، در این مطلب یک مرور اجمالی از تنظیمات و تابع‌های رایج خواهیم داشت. تا انتهای این مطلب همراه ما باشید.

راه‌اندازی سریع

برای راه‌اندازی Sass، روش‌های ویژه‌ای وجود دارد. اما این کار برای NodeJS یا پروژه‌های ReactJS که استایل‌هایشان در پوشه src قرار دارد، بسیار آسان‌تر است. تنها کافی است دستور زیر را اجرا کنید:

npm install --save node-sass-chokidar

سپس، مقادیر زیر را در قسمت scripts فایل package.json اضافه کنید:

"scripts": {
   "build-css": "node-sass-chokidar src/ -o src/",
   "watch-css": "npm run build-css && node-sass-chokidar src/ -o   src/ --watch --recursive",

فایل .css خود را به .scss تغییر دهید و npm run watch-css را اجرا کنید.

متغیرها

با افزودن variable-name$، مقدار CSS را می‌توانید در یک متغیر قابل استفاده مجدد ذخیره کنید.

$sky: skyblue;
$grass: lawngreen;

header {
  background-color: $sky;
}

footer {
  background-color: $grass;
}

یک امتیاز ویژه‌ای که این متغیرها دارند، این است که Local Scope آنها درون Selectorهای CSS است. از این رو، نگرانی بابت Global Namespace نخواهید داشت.

بخش‌بندی

برای تمیز و مرتب کردن فایل‌های خود می‌توانید آن‌ها را در بخش‌های کوچکی با برچسب underscore تقسیم‌بندی کنید. برای اطلاع یافتن SCSS از وجود یک بخش، می‌توانید از کد _variables.scss استفاده کرده و سپس کد @import ‘variables’ را در قسمت بالایی هر فایل قرار دهید. یکی از مزایای این روش در Sass نسبت به راهکارهای رایج و موجود در CSS این است که تعداد همه فایل‌های مورد نیاز برای کامپایل را تنها به یک فایل کاهش می‌دهد. درنتیجه تعداد درخواست‌های ‌HTTP کاهش یافته و بارگذاری صفحه برای کاربران با سرعت بیشتری انجام می‌پذیرد.

استایل‌های زیرمجموعه

Sass به شما این امکان را می‌دهد تا برای وضوح بیشتر، استایل‌های زیر مجموعه را درون استایل‌های والد بنویسید. در این صورت، سلکتورهای (selectors) فرزند استایل‌های والد خود را به ارث می‌برند.

@import ‘variables';

.container {
   font-family: Arial, Helvetica, sans-serif;
  .child1 {
      color: $sky;
      font-size: 10px;
   }
  .child2 {
      color: $grass;
      font-size: 40px;
  }
}

توابع و آرگومان‌ها

با استفاده از دستور @mixin می‌توانید ویژگی‌های مشترک و رایج دستورات CSS را با یکدیگر گروه‌بندی کنید. در این حالت با استفاده از دستور @include می‌توانید از این امکان در سرتاسر فایل خود استفاده نمایید. همچنین در صورت نیاز می‌توانید آرگومان‌ها و پارامترهای پیش‌فرض را نیز به آن‌ها افزوده و به شخصی‌سازی‌شان کمک کنید. به مثال ساده زیر در این مورد توجه کنید:

@mixin button-color($color: green) {
  background-color: $color;
  color: white;
  text-align: center;
  font-size: 16px;
}

// example use of mixin below replacing default green with red
.green-btn {
  @include button-color();
}
.delete-btn {
  $red: #ff4500;
  @include button-color($red)
}

با استفاده از دستور @mixin و روشی که در بالا ذکر شد، می‌توانید توابع مورد نظر خود را ایجاد کنید.

منبع