امروزه در جوامع توسعه وب دو پیش پردازنده CSS محبوبیت بسیاری را در بین کاربران و طراحان سایت کسب کرده اند همانطور که با نام آنها آشنا هستید این دو پیش پردازنده Sass و Less هستند.همچنین پیش پردازنده سوم دیگری پا به عرصه نهاده که استایلوس نام دارد.
بنا به دلایل زیر استایلوس نسبت به دو پیش پردازنده دیگر برتری دارد:
استایلوس توانایی ایجاد یک پیش پردازنده استاندارد CSS را دارد که از جمله توانایی های آن میتوان به گسترش کلاس ها ، ایجاد Mixin ها (توابع) ، تعریف و تغییر متغیر و همچنین ویژگی های پیشرفته بسیاری اشاره کرد.
حال به سراغ بررسی اصول اولیه استایلوس و برنامه نویسی CSS میرویم.
استایلوس یک پروژه اوپن سورس است که روی گیت هاب قرار گرفته در نتیجه شما میتوانید آن را با استفاده از این منبع و یا با استفاده از NPM به راحتی نصب کنید:
فایلهای CSS استایلوس با پسوند styl. ذخیره میشوند و میتوانند در هر نقطه از پروژه قرار بگیرند. این فایلها هیچ پیکربندی خاصی نیاز ندارند. کدهای این فایلها به آسانی اجرا میشوند و در نهایت کد CSS بعنوان خروجی تولید میکنند:
همانطور که شما در بالا متوجه شدید فرمان کامپایل فایل استایلوس (main.styl) به فایل CSS یک فایل با همین نام با پسوند CSS. را در خروجی تولید میکند. در صورتی که شما ترجیح دهید فایل خود را بصورت غیردستی پردازش کنید میتوانید از گزینه watch-- استفاده کنید:
همچنین گزینه های دیگری در استایلوس وجود دارد که از آن جمله میتوان به تبدیل فایل استایلوس به CSS ، مقایسه ورودی و خروجی و... اشاره نمود.
اصول استایلوس خیلی خیلی شبیه به دیگر پیش پردازنده های CSS است.اما در اینجا بعضی از آیتم های آن را با هم بررسی و مرور خواهیم کرد:
کد بالا تمامی قابلیتهای استایلوس رو یکجا نشان میدهد و شما تنها با خواندن کامنتهای هر قسمت متوجه چگونگی عملکرد آن قسمت می شوید.برای مثال در آخرین بخش extend@ تمامی ویژگیهای کلاس .noticeblock را به کلاس .warning اختصاص میدهد و یا همانطور که می دانید ویژگی import@ کلیه استایلهای موجود در فایل link.styl را درون فایل استایل اصلی پیاده میکند.
ویژگیهایی از قبیل عدم براکت ، سمیکالن و دونقطه که در دیگر پیش پردازنده های CSS سازگار هستند در استایلوس نیز سازگار هستند .
ایجاد Mixin و استفاده از آن
Mixinها بنا به دلایل بسیاری در پیش پردازنده های CSS فوق العاده مفید هستند.در واقع با استفاده از آنها میتوان بصورت کاملا منطقی کدهای CSS را تولید و سازماندهی کرد. در استایلوس استفاده از Mixin ها بسیار آسان است و نحوه استفاده از آنها همانگونه است که در دو پیش پردازنده دیگر بوده است. در واقع روند کار آنها بدین گونه است که باعث سهولت در استفاده از کدهایی میشود که نیاز به پیشوند مرورگرها دارند و این امکان را به شما میدهد که بتوانید مجموعه ای از دستورات CSS را که قرار است در جاهای زیادی استفاده شوند را از قبل آماده کنید و در جای دیگر آنها را با یک خط کد بوسیله include@ پیاده سازی کنید.
همانطور که در بالا میبینید نحوه استفاده از Mixin ها به شما نشان داده شده است. همچنین در زیر به شما نشان خواهیم داد که مقادیر پیش فرض هم میتوان به هر یک از ویژگی ها اختصاص داد:
همچنین در زیر خواهید دید که Mixinها میتوانند بوسیله کلمه کلیدی return یک مقدار را برگردانند یا استایلهای تعریف شده بین Mixinها به سادگی بر روی المان ها اعمال میشوند.
و البته در Mixin ها میتوانید از شرطها و حلقه ها نیز استفاده کنید:
مثال بالا یک مثال انعطاف پذیر از Mixin است که نحوه استفاده از شرطها ، حلقه ها و return را به شما نشان میدهد.
اگر با دو پیش پردازنده CSS کمی آشنایی داشته باشید مطالب بالا را به آسانی درک خواهید کرد چرا که تفاوت چندانی بین این سه پیش پردازنده وجود ندارد.در واقع هدف از استفاده هر یک از اینها خلاصه کردن استایلها و کاهش پیچیدگی آنهاست.
برای مطالعه بیشتر به لینک زیر مراجعه فرمایید:
