Sass چیست ؟ 

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

Sass امکانات زیادی مثل متغیرها (Variables) ،  دستورات تودرتو (Nesting)، وارد کردن قطعه کدها (Partial Imports)، گروه‌بندی کدها (Mixins)، وراثت (Inheritance) و عملگرها (Operators) را در کدهای Css را فراهم می‌کند. Cascading Style Sheets یا همان CSS ، از زمانی که توسط W3C پذیرفته شده است ، مسیر طولانی را طی کرده است. زمانی بود که طراحان وب با برش تصاویر و جداول وب سایت طراحی میکردند اما با بوجود آمدن CSS3 انقلاب بزرگی در طراحی وب سایت ها بوجود آمد و مخصوص برای افرادی که روزهای سختی را با نسخه های قبلی پشت سر گذاشته بودند عالی بود  . تا اینکه  امروزه پیش پردازنده هایی مثل Sass برای CSS ساخته شده است.

 

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

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

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

 

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

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

این روزها بسیاری از فریمورک های مدرن css از sass استفاده میکنند و البته شما میتوانید از سی اس اس خالی هم بهره ببرید ولی یک برنامه نویس حرفه ای وب بجای سی اس اس از sass بهره میگیرید . 

 

قواعد دستوری Sass

• SCSS یا Sassy CSS که با فرمت فایلی .scss ایجاد میشود و مشابه قواعد دستوری خود CSS است . 
• Indented یا simply called Sass که با فرمت .sass ایجاد میشود و شاید مشابه با قواعد دستوری CSS نباشد ولی کدنویسی سریعتری را به ارمغان می آورد 

این دو نوع فایل با استفاده از دستور sass-convert قابل تبدیل به یکدیگر هستند . 

 

متغیر ها در Sass

مثل تمام زبان های برنامه نویسی 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; }

کدهای تو در تو در Sass 

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

برای درک بیشتر به مثال زیر دقت کنید 

کد نوشته شده با Sass : 

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

 

ایمپورت کردن قطعه کد دیگر در فایل Sass

partials یا قطعه کد ها ، فایل هایی با قطعه کدهای کوچک هستند که قابل ایمپورت به دیگر فایل های Sass میباشد . حال با این قابلیت CSS میتوانید ماژولار باشد یعنی قطعه کدی را شخص دیگری بنویسد و به شما بدهد یا از اینترنت دانلود کنید و به راحتی در کدهای خود وارد کنید ! 

یک partial فایلی هست که به این شکل نام گذاری میشود . ابتدا نام partial و سپس _ و سپس  partial.scss  :  بصورت کاملتر partial.scss_

دستور @import به شما اجازه میدهد فایل های partial خود را وارد کنید  

مثال : 

// _reset.scss

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

نحوه ی ایمپورت کردن فایل بالا در Sass : 

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

توجه : زمانی که شما فایل partial را وارد میکنید تنها نام فایل را بنویسید نیازی به نوشتن _ و کلمه ی partial و .scss نیست .

 

گروه بندی یا Mixin در Sass : 

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

مثال زیر دقت کنید : 

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

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

در کد بالا میبینید که border-radius با کدهای زیادی یکبار نوشته شده است ولی بعدا میتوانید هر جا استفاده کنید و مقدار متغیر $radius را هم عوض کنید 

نتیجه ی کدهای بالا در CSS کامپایل شده به شکل زیرا ست : 

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

ارث بری و گسترش یا Extend/Inheritance در Sass 

دستور @extend در Sass یکی از دستورات کاربردی در Sass هست که باعث جلوگیری از کدنویسی مجدد میشود و مبحث DRY یا Dont Repeat Your Self مطرح میشود .

برای اینکه شما کلاس های متعددی در المان های HTML خود وارد نکنید بهتر است با استفاده از این دستور از class های دیگر ارث بری کنید و ویژگی های جدید اضافه کنید .

 

عملگرها در Sass

وجود عملگرها در CSS به شما این امکان را میدهد که کارهای بیشتری را انجام دهید مثلا px را به درصد تبدیل کنید و بالعکس. شما به عملیات حسابی ساده مثل جمع ، تفریق ، ضرب و تقسیم دسترسی دارید و میتوانید اعداد و مقادیر را محاسبه کنید البته Sass یک سری توابع هم دارد که به شما کمک میکند کارهای محاسباتی بیشتری انجام دهید که میتوانید لیستی از این توابع را اینجا ببینید