چند روز پیش یک مطلبی خوندم راجع به CSS که قابلیت nesting رو پشتیبانی میکنه و نویسنده مطلب گفته بود که با این حال دیگه چه نیازی داریم به Sass؟
تو مطلب اشاره شده دلایل اصلی استفاده از SASS به خاطر قابلیت nesting و variable ها بودن که قبلا توی CSS این موارد وجود نداشت که ما رو مجبور به استفاده از SASS می‌کرد و حالا که خود CSS قابلیت nesting رو اضافه کرده پس دلیلی نداره بازم از اون استفاده کنیم.
بعد خوندن این مطلب اول خیلی هیجان زده شدم به خاطر این قابلیت جدید CSS چون به نظرم واقعا خوبه!! دوم به فکرم زد که یه مطلب بنویسم و توضیح بدم چرا همچنان برای پروژه هایی با ابعاد بزرگ همچنان Sass یک گزینه غیر قابل جایگزین هست.
البته که این مطلب نمیتونه به تمام وجه های موضوع بپردازه ولی به نظرم یه نقطه شروع خوب میتونه باشه برای اینکه با قابلیت های خفن و ناب Sass بیشتر آشنا بشیم و بدونیم چرا میتونه ابزار خیلی خوبی باشه برامون.
نکته مهمی که در حین خوندن این مطلب نباید فراموشش کنیم این هست که این مطلب قرار نیست به شما اطلاعات کاااااملی راجع به موضوع بده. صرفا تجربیات من و پروژه هایی که توشون کار کردم هست راجع به اینکه چطور از Sass میتونیم استفاده کنیم. اگه میخواین بیشتر بدونین حتما از داکیومنت خود Sass و منابع دیگه استفاده کنین.
برای اینکه موضوع خیلی بهتر انتقال داده بشه من یه ریپو روی گیت درست کردم که اینجا میتونید ببینید:
همچنین یه لینک StackBlitz هم دارم که میتونید همه چیو آنلاین ببینید که لازم نباشه کلون کنید و این داستانا (میدونم شما هم مث من حال اینکارا رو ندارید 😉)
همه راجع به اینکه میشه توی Sass از متغیر ها و Nesting استفاده کرد خبر داریم و روی این موضوع توافق داریم. همچنین Partial ها (همون که تو هر فایل میتونیم فایل های Sass دیگه رو import کنیم) هم که میدونیم. پس اینجا راجع به این چیزا صحبتی نمیکنم.
البته میدونیم که توی Sass میشه از Mixin ها و Function ها هم استفاده کرد که توی CSS امکانش وجود نداره اما اینکه چطور و چرا رو من میخوام تجربه خودم رو بگم.
کاربرد توابع با چیزی که قبلا مثلا توی JS استفاده میکنیم خیلی تفاوتی نداره ولی توی Sass برامون چه کار هایی میتونن انجام بدن؟ من سعی کردم با ساده ترین مثالی که میشه زد این موضوع رو توضیح بدم:
یکی از ساده ترین کار هایی که میتونیم انجام بدیم تبدیل کردن تایپ رنگ هاست. اینجا ما یک رنگ با فرمت HEX دریافت میکنیم و با فرمت RGBa برمیگردونیم. البته خیلی هم کار پیچیده ای نیست همینطور که میبینید. ولی بسیار کاربردی میتونه باشه.
اینطور که مثلا شما رنگ های دیزاین سیستم تون بر اساس hex هست و نمیخواین دردسر تعریف کردن کلی متغیر رنگ دیگه برای حالت rgb اش رو بکشید، خیلی ساده میشه از این تابع استفاده کرد.
یا مثلا میشه حتی فقط اعداد رنگ ها رو برگردوند و برای تعریف css variable های global ازشون استفاده کرد و مقدار alpha رو داینامیک کرد.
خب قابلیت mixin رو که میدونیم، شما میتونید یه تیکه از استایل تون رو reusable کنید، حتی پارامتر بدید و حالت داینامیک داشته باشید. یه نمونه از mixin ها ببینیم:
اینجا mixin بالایی به ما این قابلیت رو میده که هرجا نیاز داشتیم که scrollbar ها رو مخفی کنیم خیلی ساده ازش استفاده کنیم و mixin بعدی کلا محتوای داخلش به کمک @content داینامیک هست!
این مدلی هم استفاده اش میکنیم:
دیگه موقع اسکرول کردن scrollbar مخفی میشه - که خروجیش رو پایین میتونید ببینید. توضیح خیلی خاصی نداره اینجا واقعا. کلا هرجا که احساس کردید یه چیزی خیلی داره تکرار میشه میتونید برای جلوگیری از تکرار کد ها از mixin ها استفاده کنید دیگه
حالا اگه بخوایم reusability رو بالاتر ببریم و مثلا بخوایم طبق یک دیزاین سیستم همه حالت هال مختلف یک button رو طراحی کنیم میتونیم همه variant های مختلفی که داریم رو توی یک لیست درست کنیم و بعد روش یه loop بزنیم و استایل هاش رو خیلی ساده به کمک mixin ها بسازیم:
همینطور که میبینید اول همه رنگ ها رو توی یک لیست تعریف کردیم و بعد به کمک حلقه each روی این لیست بچرخیم و به ازای هر کدوم از حالت هایی که داریم یه کلاس جدید بسازیم.
نحوه استفاده اش رو اینجا میتونید ببینید. ولی خیلی ساده است - در واقع هر کدوم از رنگ های این badge ها یک modifier هستند (از متد BEM استفاده شده)
خروجی مون در نهایت این شکلیه:
خیلی وقت ها لازمه که متغیر هایی که توی Sass داریم رو توی JS هم استفاده کنیم. خب نمیشه که یکبار همه چیز رو توی Sass و یکبار دیگه توی JS تعریف شون کرد... کد تکراری؟؟
یه کاری که میتونیم بکنیم اینه:
توی یک فایلی مثلا variables.scss به کمک export: خروجی میدیم از رنگ هایی که داریم که متغیر های css رو بسازیم، بعد میتونیم این فایل رو توی یک css ماژول import کنیم:
و تو مرحله بعد توی فایل JS مون import شون کنیم
و خب دیگه حالا میتونیم خیلی راحت ازشون توی JS هم استفاده کنیم:
شاید یکم پیچیده شد، اگه من جایی اشتباه کردم هم بهم بگید حتما.
فایل های این قسمت پروژه رو میتونید اینجا ببینید.
در نهایت خروجی ما برای این قسمت هم این شکلی میشه:
تو این مطلب سعی کردم خیلی کلی راجع به بعضی از قابلیت های کوچیک Sass صحبت کنم. قطعا که این تمام داستان نیست. برای پروژه هایی با ابعاد خیلی بزرگ میتونه قدرتشو خیلی بهتر هم نشون بده. کلا اصلا طوری نیست که بشه دست کم گرفتش. من اینجا سعی کردم با مثال های خیلی ساده نشون بدم که چه پتانسیل هایی داره و Sass فقط Nesting و Variable نیست!
خروجی کلی ما
اگه مشکلی یا نکته ای توی مطلب بود حتما بهم توی بخش کامنت ها بگید و اگه هم دوست داشتید باهم گپ بزنیم میتونید از طریق لینکدین باهام در تماس باشید.
