اگر بخواهید یک کلبه چوبی درست کنید , ترجیح می دهید از چکش و چند عدد میخ استفاده کنید یا یک دریل برقی و چند عدد پیچ؟ مسلما روش دوم مدرن تره , درصد خطای کمتری داره و همچنین سرعت کار رو بالا می بره. هدف پیش پردازنده های CSS هم همینه. شما می تونید با استفاده از پیش پردازنده های CSS به کدنویسی خودتون سرعت بالایی ببخشید و همچنین از بروز بعضی خطاها جلوگیری کنید.

تصور کنید در CSS بتوانید متغیر تعریف کنید و یا از عملگرهای شرطی و یا حلقه ها استفاده کنید!
موارد بالا تمام نقاط مثبت پیش پردازنده های CSS نیست. بیایید با هم به صورت جزئی به مزیت های این پیش پردازنده ها بپردازیم.

متغیرها

امکان تعریف متغیر در CSS و استفاده از اون یک مزیت فوق العادست. برای مثال می تونید رنگ های وب سایت رو به صورت متغیر یک بار در اول کار تعریف کنید و در بقیه قسمت ها رنگ رو برابر اون متغیر قرار بدید. این جوری اگر تصمیم به تغییر رنگ اصلی سایتتون گرفتید , فقط کافیه که مقدار اون متغیر رو تغییر بدید.

توابع

یک ویژگی خارق العاده دیگه Mixin ها هستن که میتونن به دو نوع ساده یا یک تابع با متغیر تعریف بشن. برای مثال شما برای اختصاص دادن border-radius به یک المان بهتر است که از پیشوند های آن هم استفاده کنید.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

اگر از CSS استفاده کنید , هر زمان که به border-radius نیاز داشته باشید , باید به ۳ شکل مقداردهی کنید , اما می توانید از mixin استفاده کنید تا سرعت کار رو بالا ببرید.

.rounded-corners {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
#login-box {
   .rounded-corners;
}

همچنین می توانید mixin رو به شکل یک تابع با متغیر بنویسید.

.rounded-corners(@radius) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   border-radius: @radius;
}
#login-box {
   .rounded-corners(5px);
}

در نهایت

پیش پردازنده های CSS همگی در نهایت کدها رو به CSS تبدیل میکنند و همین باعث میشه که برای همه مرورگر ها قابل فهم باشه. شما می تونید از LESS , Sass و Stylus استفاده کنید. یک بار از پیش پردازنده ها استفاده کنید کافیه تا حسرت اینو بخورید که کاش زودتر باهاشون آشنا می شدید