یک لقمه Sass دور هم

سلام به همه دوستان

در این مقاله دوست دارم در مورد Sass توضیحاتی بدم تا با قابلیت‌های بسیار خوب و حرفه‌ای‌ش آشنا بشید.

اگر در برنامه‌نویسیِ فرانت‌اِند تازه کار هستید و یا حتی اگر حرفه‌ای، احتمالا واژه‌ی Sass به گوشتون خورده.
در توسعه‌ی فرانت‌اِند بعد از اینکه مدیریت CSS ها در پروژه‌های بزرگ سخت شده بود ، و کار کدنویسی رو تا حدی طاقت‌فرسا می‌کرد، تکنولوژی‌هایی مثل Sass و LESS بوجود اومدن تا کار استایل‌دهی رو بسیار کاراتر، لذت‎بخش‌تر و ساده‌تر کنند.

در این بین شاید کلمه SCSS هم به گوشتون خورده باشه، که به اعتقاد اکثریت هیچ تفاوتی با Sass نداره و یکی هستند. درواقع در ابتدا Sass معرفی شد، اما Syntax (سینتَکس) اون به راحتیه CSS نبود و تا حدی پیچیدگی‌هایی داشت. پسوند فایل (به طور مثال) sample در Sass به این صورت نوشته می‌شه :

sample.sass

برای اینکه سینتَکس Sass ساده‌تر و بیشتر به CSS شبیه بشه SCSS معرفی شد؛ که مخفف Sassy CSS یا Standard CSS هست؛ که در اون فایل فرضی sample به این صورت ساخته می‌شه :

sample.scss

پیش‌پردازشگری، راه چاره‌ی توسعه‌ای بهتر :

راه حل Sass پیش‌پردازشگری‌ (Pre Processing) هست. یعنی تمام کدی‌هایی که در Sass می‌نویسیم در نهایت پردازش شده و به CSS تبدیل می‌شوند. چراکه در نهایت مرورگر‌ها برای استایل‌دهی CSS رو می‌فهمند؛ نه Sass.

اما بریم سراغ معرفی تعدادی از ویژگی‌های مفید در SCSS (برای ساده‌تر شدن مطلب از بیان کدهای Sass صرف نظر می‌کنم و مستقیما SCSS رو توضیح می‌دم)

۱. متغیر، گمشده‌ای در CSS :
یکی از مزیت‌های بزرگ SCSS نسبت به CSS امکان تعریف متغیرهاست. متغیرها در SCSS به این صورت قابل تعریف هستند :

$primary-color: #333;

CSS :

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

SCSS :

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

در اینجا شاید براتون این سوال پیش بیاد که در کد SCSS تعداد خطوط کد ما بیشتر از تعداد خطوط کدی هست که در CSS داریم، پس چه دلیلی برای استفاده از SCSS وجود داره ؟!
درسته هست که در اینجا تعداد خطوط کدهای SCSS بیشتر هستند. اما در یک پروژه واقعی، کار به همینجا ختم نمی‌شه.
مثلا تصور کنید یک قالب که دارای سه صفحه هست رو باید کدنویسی کنید، که در این قالب، دو رنگ، یکی Primary Color و دیگری Secondary Color هستند و در اکثر اِلِمان‌های صفحه از این دو رنگ استفاده شده. حالا به هر دلیلی تصمیم بر تغییر یکی از این دو رنگ می‌گیرید. اگر با CSS خام کار استایل‌دهی را انجام داده باشید باید در تک تکِ اِلِمان‌ها رنگ را تغییر دهید که به احتمال بسیار زیاد اینکار با باگ‌هایی مواجه خواهد شد. اما اگر بر اساس SCSS استایل‌دهی را انجام داده باشید فقط کافیست رنگ متغیرتان را تغییر دهید تا این تغییر در همه‌ی اِلِمان‌ها اِعمال شود.

۲. زیبایی کدها با قابلیت Nesting :
آنچنان این ویژگی زیبا و لذت‌بخش هست که ترجیح میدم قبل از هر توضیحی ابتدا به کدهای زیر توجه کنـیــد :

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

SCSS :

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li { display: inline-block; }
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

قابلیت تودرتویی (Nesting) در کم‌تر نوشتن کدها به شما کمک می‌کند. فرزند هر اِلِمان در توی اِلِمان پدر نوشته می‌شود، که خوانایی بالایی برای برنامه‌نویس ایجاد کرده و در یک کلام واقعا زیباست.

۳. کدنویسی هوشمندانه‌تر با استفاده از عملگرها :
به کدهای زیر توجه کنید :

CSS :

.container {
    width: 100%;
}
article[role="main"] {
    float: left;
    width: 62.5%;
}
aside[role="complementary"] {
    float: right;
    width: 31.25%;
}

SCSS :

.container { width: 100%; }
article[role="main"] {
    float: left;
    width: 600px / 960px * 100%;
}
aside[role="complementary"] {
    float: right;
    width: 300px / 960px * 100%;
}

در SCSS همانند اکثر زبان‌های برنامه‌نویسی می‌توان از عملگرهایی مثل جمع ، تفریق ، ضرب و تقسیم استفاده نمود.

۴. استایل‌دهی حرفه‌ای تر با Mixins :

قابلیت جذاب و البته کاربردی دیگر در SCSS که شباهت زیادی به فانکشن‌ها دارند، Mixins ها هستند.

CSS :

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

SCSS :

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}
.box { @include border-radius(10px); }

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

۵. فانکشن‌ها :

بله. ویژگی جذاب دیگر در SCSS فانکشن‌ها هستند.

CSS :

.container {
  width 100px;
}

SCSS :

@function add-padding($base-value, $coef) {
    @return $base-value * $coef
}
.container {
   width: add-padding(10px, 2)
}    

همونطور که می‌بینید بین فانکشها و میکسینز شباهت زیادی وجود داره. تفاوت اصلی اونها در این هست که فانشکن‌ها مقداری رو به عنوان خروجی بازمی‌گردونن ولی میکسینز صرفا کدی رو در محلی که include می‌شه، برای ما جایگزین می‌کنه.

فکر می‌کنم تا حد مناسبی آشنایی مقدماتی با SCSS پیدا کرده باشید. قابلیت‌های بسیار دیگر از جمله Extend ها، حلقه‌ها، عبارات شرطی و... در SCSS وجود دارند که خارج از بحث معرفی (که در این مقاله به اون پرداختم) وجود داره و شما با مراجعه به وب‌سایت رسمی scss-lang می‌تونید با اونها آشنا بشید.