5 دلیلی که باید از Sass استفاده کرد!

$mainFont: "Helvetica Neue", Arial, sans-serif;
$mainColor: #CC6699;

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

.mySelector { font-family: $mainFont; color: $mainColor; }

خیلی خوبه نه؟!! این ویژگی به تنهایی باعث میشه که ارزش نصب کردن sass و جهت صرفه جویی در زمان نوشتن css کامل درک کنیم.

2- import@
شاید شما به خودتون بگید که css هم دستور import و داره!! اما دستور import موجود در css با sass کاملا فرق داره. css@import به شما این امکان و میده تا فایل css خودتون رو به بخش های کوچکتری تقسیم کنید. فقط مساله ای که هست اینه که هر زمان که از import@ در css استفاده کنید یه درخواست HTTP دیگه میسازه یعنی مرورگر نمی تونه که چند تا شیوه نامه و به صورت موازی اجرا کنه و به همین خاطر هم تاخیر در بارگذاری  صفحه پیش میاد. Sass هم همین گزینه و داره با این تفاوت که درخواست HTTP نمیسازه و محتوای همه فایلهایی که شما در sass ایمپورت کردین رو با فایلی که داخلش از import@ استفاده کردین ترکیب میکنه و درنهایت بعد از کامپایل شما فقط یک فایل css رو در مرورگر وب بارگذاری میکنید.
فرض کنید که ما دو فایل reset.scss و global.scss داریم که میخوایم محتوای فایل reset.scss رو داخل base.scss ایمپورت کنیم.

/*reset.scss */
 
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
/* global.scss */
 
@import 'reset';
 
body {
  font-size: 1em "iran-sans", tahoma;
  background-color: #e3e3e3;
  border: 1px solid #000;
}

//compiles to

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
 
body {
  background-color: #e3e3e3;
  font-size: 1em "iarn-sans", tahoma;
  border: 1px solid #000;
}

3- تابع رنگ
در sass به دو صورت می تونید از توابع استفاده کنید یکی استفاده از توابع از پیش تعریف شده که در sass وجود داره و دیگری هم توابعی هستن که خودمون برای sass تعریف می کنیم. میدونم که همه افرادی که این مقاله رو میخونن ممکنه اطلاعاتی در مورد برنامه نویسی نداشته باشن و مفهوم تابع رو کامل درک نکنند ولی نگران نباشید کار با توابع sass اصلا پیچیده نیست! استفاده از توابع رنگی در sass چندین ویژگی و به همراه داره که در ادامه درباره این ویژگی ها صحبت میکنم. اگر دقت کرده باشین در css راهی وجود نداره که یک رنگ و به صورت نسبی به رنگ دیگه تبدیل کنید اما sass شامل یه طیف بزرگ رنگیه که به شما این امکان و میده به صورت همه جانبه رنگ و دستکاری کنید. sass برای تکنیک های دستکاری رنگ کامله در حالیکه css این قدرت و نداره.

//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha) 

مفهوم این سینتکس خیلی ساده است. در بالا سه تابع تعریف شده:  lighten، darken و rgba که هر کدام از توابع شامل دو آرگومان هستند. اولین آرگومان، رنگی است که ما تصمیم داریم اون و دستکاری کنیم این رنگ می تونه به صورت هگزادسیمال، RGB یا هر فرمت رنگی که در css ازش استفاده می کنیم تعریف بشه حتی می تونه یه متغییر باشه!دومین آرگومان برای تغییر رنگ استفاده می شه. مثلا اگر بخواین که رنگتون و 10% تیره تر کنید از تابع darken استفاده کنید یا اگر بخواین که رنگتون 15% روشنتر باشه از تابع lighten، تابع rgba باعث می شه که رنگتون شفافتر بشه. نتیجه این توابع بعد از کامپایل کردن مقدرا مورد نظرتون و در css قرار می ده.

//in parenthesis you can put any color value followed by the amount you want to modify it by.
//lighten(#000, 10%)
//darken(rgb(0,0,0), 25%)
//rgba(blue, 0.6)
//rgba($mainColor, 0.6)
//use case
$color: #333;//set color variable
.myButton {
 background-color: rgba($color, 0.8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
}
//this compiles to:
.myButton {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
}

امیدوارم که شما هم مفهوم این ویژگی عزیز و خوببب درک کرده باشین از این سه تابع می تونید به چندین روش دیگه هم استفاده کنید که همان کنتراست رنگی مورد نظر و دریافت کنید و ازش لذت ببرید.

4- Mixins
نوشتن بعضی چیزها تو css یکم خسته کنندست مخصوصا با css3 و اونهمه پیشوندهای طولانی و پیچیده که ازش سر درنمیاری! یک میکسین یه گروهی از کدهای css که قراره چندین جا ازشون استفاده کنید رو در خودش نگه می داره و به جای تایپ کردن یکسری کد به صورت مکرر می تونید اون و جایی نگه دارید و فقط یک بار صداش کنید. برای اینکه یه میکسین بسازید باید از کلمه mixin@ استفاده کنید و پس از اون یه نام و یکسری استایل بهش اضافه کنید حتی میتونید به میکسین، پارامتر هم بدین تا انعطاف پذیری بیشتری داشته باشه. ما اینجا یه mixin به اسم box-sizing میسازیم و یکسری پارامتر براش تعریف میکنیم به این صورت:

@mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

برای استفاده از mixin باید از کلمه کلیدی include@ استفاده کرد.

//declare mixin(now being passed an argument)
@mixin box-sizing($boxSize) {
  -webkit-box-sizing: $boxSize;
     -moz-box-sizing: $boxSize;
          box-sizing: $boxSize;
}

//use mixin
.mySelector {
    @include box-sizing(border-box);
}


//compiled to:
.mySelector {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

همان طور که در مثال بالا مشاهده می کنید برای صدا کردن mixin از include@ استفاده کردیم و در ادامه اون اسمی که برای mixin قرار دادیم. می بینید که با استفاده از این روش چقدر زمان کمتری و برای نوشتن کدها صرف می کنیم.

5-وراثت یا extend
این هم یکی از ویژگی های مهم و مفید sass هست اما این و اخر همه گفتم که بیشتر هیجان زده بشین این ویژگی به ما این اجازه و میده تا محتوای یک کلاس و داخل یه کلاس دیگه استفاده کنیم. فرض کنید بخواهیم یه جفت دکمه با پس زمینه های متفاوت داشته باشیم مثلا یه دکمه decline و accept. از اونجایی که هر دوتا دکمه از نظر ظاهری شبیه هم هستند پس یکسری استایل های مشابه دارند و ما می تونیم که استایل های مشابه را به اشتراک بگذاریم با استفاده از sass این کار به راحتی انجام میشه به این صورت که پیش فرضی که برای دکمه های یکی هست و به وراثت می گذاریم یعنی هر دو دکمه این استایل ها رو به ارث می برند.

.button {
 background: rgba($color, .8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 @extend .button;
 background: red;
}
//compiles to
.button, .button-decline {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 background: red;
}

می بینید به چه راحتی در sass میشه از تکرار جلوگیری کرد و همچنین زمان کمتری و برای نوشتن کد صرف کرد!!
خب! با یاد گرفتن این 5 مورد در این مقاله شما می تونید استفاده از sass و شروع کنید اما باید در نظر داشته باشین که این 5 مورد تنها بخش کوچکی از مزیت های کلی موجود در sass هست. اگر شما هم منابع مفیدی در این زمینه دارید می تونید از طریق فرم زیر، اون رو به بقیه هم معرفی کنید