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

5 دلیلی که باید از Sass استفاده کرد!
من مطمئنم که شما اسم sass را شنیدید ولی نمی دونید که شروع استفاده از آن به چه صورتی هستش! در حال حاضر صفحات وب سایت و اپلیکیشن ها همگی باید cssهای بزرگ و درون خودشون جا بدهند و نگه داری کنند، ولی sass این کار و برای ما راحتر می کنه! یکی از پیش پردازنده های جالب و معروف برای css که بسیار کاربردی هم هست sass است که به ما این اجازه را میده css و به صورت مختصرتر و منظم تر نگه داری کنیم، در حالیکه ارائه یکسری از این ویژگی ها در css هنوز در دسترس نیست.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید


آموزش کامل sass برای راه اندازی یک پروژه یک کمی فراتر از محدوده این مقاله هست اما نصب و راه اندازی آن نسبتا سریع و آسونه! بطور خلاصه شما برای استفاده از sass دو راه دارید. استفاده از ابزارهای codekit و koala و یا استفاده از خط فرمان. نکته جالب اینه که لازمه sass و فقط یک بار نصب کنید و برای همیشه از داشتنش لذت ببریدlaugh
همه فرمت های صحیح در css در sass هم معتبره!surprise این یعنی که شما می تونید از زمانی sass را استفاده کنید که استایل های نوشته شده در آن به همان سبکی باشه که در css می نوشتین پس از شروع کار با sass اصلا نترسیدwink در این مقاله تصمیم دارم که 5 تا مزیت مهم استفاده ازsass و بهتون معرفی کنم :

1. استفاده از متغییر
تا حالا شده که توی cssهاتون از یکسری خصیصه با مقادیر یکسان چندین بار بصورت مکرر استفاده کرده باشین (مثلا یک رنگ خاص که قراره جاهای مختلف صفحتون ازش استفاده کنید)؟ و یا برای پیدا کردن مقدار یک استایل خاص توی cssتون کلی وقت صرف کرده باشین؟!!frown sass یک متغییری را برای ذخیره کردن اطلاعاتی که به صورت مکرر استفاده می شوند و در اختیار شما قرار می دهد، حالا با این روش شما می تونید که به مقدار رنگ یا اندازه فونت یا ... که چندین بار در cssتون ازش استفاده کردین براحتی دسترسی داشته باشین.( این خیلی عالیه!!!laugh). sass از علامت $ برای ساخت متغییر استفاده می کنه.
$mainFont: "Helvetica Neue", Arial, sans-serif;
$mainColor: #CC6699;
حالا شما اگر بخواهید از یکی از این مقادیر استفاده کنید کافیه که به جای اون از متغییرش استفاده کنید.
.mySelector { font-family: $mainFont; color: $mainColor; }
خیلی خوبه نه؟!!cool این ویژگی به تنهایی باعث میشه که ارزش نصب کردن 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 ازش استفاده می کنیم تعریف بشه حتی می تونه یه متغییر باشه!enlightenedدومین آرگومان برای تغییر رنگ استفاده می شه. مثلا اگر بخواین که رنگتون و 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;
}
امیدوارم که شما هم مفهوم این ویژگی عزیز و خوببب درک کرده باشینlaugh از این سه تابع می تونید به چندین روش دیگه هم استفاده کنید که همان کنتراست رنگی مورد نظر و دریافت کنید و ازش لذت ببرید.

4- Mixins
نوشتن بعضی چیزها تو css یکم خسته کنندستfrown مخصوصا با 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 هست اما این و اخر همه گفتم که بیشتر هیجان زده بشینlaugh این ویژگی به ما این اجازه و میده تا محتوای یک کلاس و داخل یه کلاس دیگه استفاده کنیم. فرض کنید بخواهیم یه جفت دکمه با پس زمینه های متفاوت داشته باشیم مثلا یه دکمه 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 هست. اگر شما هم منابع مفیدی در این زمینه دارید می تونید از طریق فرم زیر، اون رو به بقیه هم معرفی کنید blush
 

نیلوفر افشار کارشناسی ارشد هوش مصنوعی خونده و چند سالی می شه که توسعه دهنده FrontEnd هست و بصورت تخصصی با Sass و Bootstrap کار می کنه. اون همیشه در زمینه مباحث و تکنولوژی های جدید در حوزه وب تحقیق می کنه.

نظرات و سوالات کاربران

ارسال پاسخ علیرضا حمیدی نکو
علیرضا حمیدی نکو
دوشنبه ۱۹ آذر ۱۳۹۷ ۱۷:۱۱
بسیار مطالب مفید تاثیر گذار و در عین حال جذاب بود از لطف شما سپاسگزارم.
ارسال پاسخ علیرضا
علیرضا
یکشنبه ۱۰ خرداد ۱۳۹۴ ۱۱:۳۰

جالب بود و عجیب!
ممنون بابت گذاشتن این مطلب مفید