چه چیزی درباره SASS اینقدر خوب است؟

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

SASS چیست؟

SAAS، مخفف Syntactically Awesome Stylesheets (استایل‌شیت‌های عالی از نظر سینتکس) یک پیش‌پردازنده CSS است. در جهت وضوح بیشتر، SAAS در واقع CSS را گسترش می‌دهد تا به شما قدرت بیشتری در زمینه سازمان‌دهی و بهره‌وری بدهد.

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

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

SASS یکی از معروف‌ترین پیش‌پردازنده‌های CSS است و به شدت توسط بسیاری برنامه‌ها و حرفه‌ای‌ها استفاده می‌شود. SASS می‌تواند با دو سینتکس مختلف، یعنی .sass یا .scss نوشته شود که در ادامه بیشتر به جزئیات آن وارد خواهیم شد. سپس هم فایل SASS به CSS معمولی کمپایل می‌شود، که توسط مرورگر بارگذاری شده و صفحه را استایل‌بندی می‌کند.

نصب و اجرای SASS

این‌ها راه‌های مختلف برای نصب SASS هستند. شما می‌توانید:

• SASS اصلی را نصب کنید که بر روی Ruby اجرا می‌شود.
• Node-SASS را نصب کنید که بر روی Node.js اجرا می‌شود.
• یک برنامه که SASS را به صورت داخلی دارد را نصب کنید؛ مانند Compass.app.

نصب Ruby SASS

SASS با استفاده از Ruby کمپایل می‌شود. برای این متد، باید Ruby را بر روی دستگاه خود نصب داشته باشید. سیستم عامل MacOS از قبل Ruby را به همراه دارد، پس اگر یک لپتاپ MacBook دارید، می‌توانید نصب Ruby را رد کنید.

با داشتن Ruby بر روی دستگاه خود، وقت آن است که الماس SASS را نصب کنید. در خط دستوری خود، این کد را اجرا کنید:

gem install sass

حال، برای اجرای SASS از خط دستوری خود و کمپایل کردن input.css در فایل output.css، این دستور را اجرا می‌کنیم:

sass input.scss output.css

نصب Node-SASS

Node-SASS در واقع یک Node.js در اتصال با LibSASS، یعنی یک نسخه C از پیش‌پردازنده SASS است. در جهت اجرای آن، باید Node.js را بر روی دستگاه خود داشته باشیم. دستورالعمل نصب آن را می‌توانید در این لینک پیدا کنید.

با داشتن Node.js، می‌توانیم Node-SASS را با استفاده از NPM و با اجرای این دستور نصب کنیم:

npm install node-sass

مشابه نسخه Ruby، در Node-SASS می‌توانیم یک فایل خروجی SCSS با اجرای این دستور در خروجی CSS خود کمپایل کنیم:

node-sass input.scss output.css

نصب برنامه

به جای نصب SASS با استفاده از یک خط دستوری، گزینه‌ دیگری برای اجرای آن از طریق یک برنامه مانند Compass.app، یعنی یک فریم‌وورک نوشتن استایل‌شیت چند پلتفرمه که شما را قادر می‌سازد استایل‌ها را در SASS بنویسید و بدون نیاز به پریدن به خط دستوری آن‌ها را به CSS تبدیل کنید، وجود دارد. Compass.app نیازی به نصب Ruby ندارد و در ویندوز، مک و لینوکس در دسترس است.

اگر به Compass.app علاقه‌ای ندارید و همچنان می‌خواهید از یک برنامه برای رسیدگی به پردازش SASS استفاده کنید، می‌توانید نگاهی به CodeKit، Koala، Prepros یا Scout داشته باشید.

اجرای SASS

در حالیکه یک برنامه واقعا می‌تواند روند اجرای SASS را مقداری ساده‌تر کند،‌ خط دستوری همچنان روش رایج‌تری میان اکثر توسعه دهندگان است.

ما همچنین می‌توانیم task runnerهایی مانند Grunt و Gulp را در در جهت جلوگیری از اتلاف وقت در پردازش‌های خود ادغام کنیم. ما می‌توانیم به آن‌ها دستور دهیم که مراقب تغییرات در فایل‌های SASS ما باشند و به طور خودکار هر بار که آن‌ها را تغییر می‌دهیم، آن‌ها را در خروجی CSS ما کمپایل کنند، و باعث شوند که SASS حتی قدرتمندتر به نظر برسد.

سینتکس‌ها

همانطور که پیش‌تر اشاره کردم، SASS می‌تواند با استفاده از دو سینتکس مختلف نوشته شود: .sass و .scss.

سینتکس فرورفتگی SASS، سینتکس قدیمی‌تر و اصیل این پیش‌پردازنده است. گرچه، چند سال پیش SASS سینتکس جدید خود را معرفی کرد: SCSS یا Sassy CSS. این سینتکس جدید که به CSS اصلی نزدیک‌تر است، (در واقع به جای داشتن فرورفتگی‌ها مانند SCSS همان سمی‌کالن‌ها و براکت‌ها را دارد) حتی به عنوان «CSS جدید» شناختنه می‌شود. حال می‌توانیم بگوییم که SCSS واقعا همان CSS دارای قدرت‌های خارق العاده است.

هر دو سینتکس طرفدارهای خود را دارند. ترجیح شخصی من SCSS است، و علت آن هم این است که حس بازی کردن با همان CSS اصلی را دارد. گرچه، قطعا هر سینتکس نکات مثبت و منفی خود را دارد.

خواندن SASS آسان‌تر است، خلاصه‌تر است و از استانداردهای کدنویسی مرتب پشتیبانی می‌کند. در سمت دیگر SCSS یک ابرمجموعه واقعی از CSS است، مانع یادگیری کوتاه‌تری دارد و با CSSهایی که از قبل موجود هستند، بهتر ادغام می‌شود.

پس در آخر، چه چیزی درباره آن اینقدر خوب است؟

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

SASS تعداد زیادی امکانات شگفت‌انگیز دارد؛ مانند تو در تویی، partialها، ترکیب‌ها،‌ importها، عملگرها، وراثت و...، که تفاوت در نوشتن استایل‌ها را به عمل می‌آورند و شما را قادر می‌سازند کدهایی بنویسید که با CSS خالص غیر ممکن هستند.

بیایید نگاهی به برخی امکانات اصلی آن داشته باشیم.

تو در تویی

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

div {
  font-size: 1.1rem;
  border: 1.5px solid $color-primary;

  ul {
    background-color: lightblue;

    li {
      background-color: yellow;
    }
  }
}

Partialها

Partialها فایل‌هایی هستند که کد SASSای را که باید با استفاده از دستور العمل @import در فایل‌های SASS دیگر include شوند را در خود نگه می‌دارند. Partialها در ترکیب با یک معماری فایل خوب، می‌توانند راه عالی‌ای برای ساده‌سازی روند پیدا کردن استایل‌هایی که می‌خواهید تغییر دهید باشند. نام فایل‌های Partial با «_» شروع می‌شود. (مانند _navbar.scss یا _buton.scss)

در زیر، مثالی از یک معماری فایل برای یک پروژه SASS فرضی، و در ادامه فایل main.css را به همراه importهای متناظر را می‌بینید.

معماری فایل:

|- css
|--- style.css
|- sass
|--- main.scss
|--- base
|------ _variables.scss
|------ _reset.scss
|------ _base.scss
|--- components
|------ _navigation.scss
|------ _sections.scss
|------ _grid.scss

فایل main.scss:

// Base
@import "components/navigation";@import "base/reset";
@import "base/variables";
@import "base/base";

// Components
@import "components/navigation";
@import "components/sections";
@import "components/grid";

Importها

همانطور که از نامش پیداست، @import برای include‌ کردن فایل‌های SCSS در فایل‌های SCSS دیگر استفاده می‌شود. CSS به صورت بومی قابلیت import را به شما می‌دهد، گرچه این موارد یک درخواست HTTP برای هر import نیاز دارند، که در نتیجه کارایی را تحت تاثیر قرار می‌دهند. SASS در سمت دیگر، بدون توجه به تعداد partialهایی که قرار است import شوند، تنها به یک درخواست HTTP نیاز دارد؛ زیرا درخواست مورد نظر توسط روند کمپایل کردن بر روی خروجی CSS انجام می‌شود.

وراثت

قابلیت وراثت SASS، در واقع CSS را قادر می‌سازد که با استفاده از دستور @extend بین انتخاب کننده‌های مختلف به اشتراک گذاشته شود.

برای مثال در کد زیر، عنصر ul ویژگی‌های border و margin را به مانند عنصر .box به اشتراک می‌گذارد، اما فقط ul یک پس‌زمینه قرمز خواهد داشت.

.box {
  border: 1px solid black;
  margin: 0% 10%;
}

ul {
  @extend .box;
  background-color: red;
}

عملگرها

یک امکان ساده اما موثر دیگر SASS این است که شما را قادر می‌سازد تا از عملگرهای ریاضی بر روی کد خود استفاده کنید. این برای مثال در افکت‌های محاسبات حاشیه پرکاربرد است.

من در حال حاضر در SASS یک تازه‌کار به حساب می‌آیم و هنوز بسیاری از امکانات قدرتمند آن را در لیست قرار نداده‌ام، اما می‌توانم با اطمینان بگویم که نوعی حس کنترل خوب در هنگام نوشتن CSS را به شما می‌دهد. امیدوارم که از این مقاله لذت برده باشید.

منبع