Faragiri

همهٔ زبان‌ها

آموزش Sass و پیش‌پردازنده‌ها CSS

متغیر، تودرتویی، ترکیب رنگ و ماژول امروز در خود زبان هستند. پرسش دیگر این نیست که آیا لازم است، این است که کدام دو مورد باقی مانده.

۴بخش
۳دقیقه خواندن
۴عمق

دو کرانه، چهار تخته

از پیش‌پردازنده به خود زبان، و چیزی که در راه می‌ماند

دو کرانه دو شکل نوشتن یک برگه سبک‌اند و تخته‌ها ترتیبی است که مهاجرت را بی‌خطر می‌کند.

برگه سبک با پیش‌پردازندهیک مرحله ساخت، و متغیرهایی که در مرورگر وجود ندارند
  1. ۰۱متغیرها را به خاصیت سفارشی ببریدو از همان‌جا در کوئری رسانه‌ای مقدار تازه بدهید
  2. ۰۲تودرتویی را به نحو بومی برگردانیدهمان نویسه برای والد، و همان معنی
  3. ۰۳توابع رنگ را جایگزین کنیدترکیب رنگ و نوشتار نسبی، در خود زبان
  4. ۰۴حلقه‌های تولید کلاس را نگه داریدتنها چیزی که خود زبان جایگزینی برایش ندارد
برگه سبک بدون مرحله ساختهمان قاعده‌ها، با متغیرهایی که در مرورگر زنده‌اند

این چهار تخته ترتیب دارند. تخته آخر برای بیشتر پروژه‌ها اصلا لازم نیست، و اگر لازم بود همان یک مورد است که نگه داشتن ابزار را توجیه می‌کند.

پیش‌پردازنده‌ها برای شش چیز ساخته شده بودند و امروز چهار تایشان در خود CSS هست. پرسش دیگر این نیست که آیا به یکی نیاز دارید، این است که کدام دو مورد باقی مانده و آیا برای پروژه شما مهم‌اند.

  • متغیر: --rail: 220px در خود زبان، و برخلاف متغیر پیش‌پردازنده در مرورگر زنده است
  • تودرتویی: با همان نویسه & برای انتخابگر والد، بدون هیچ ابزاری
  • ترکیب و تغییر رنگ: با تابع‌های ترکیب رنگ و نوشتار رنگ نسبی
  • ماژول: با قاعده لایه و ایمپورت خود زبان

تفاوت متغیر زنده مهم است و نه یک جزئیات: متغیر پیش‌پردازنده هنگام ساخت جایگزین می‌شود و در مرورگر وجود ندارد، پس نمی‌شود با جاوااسکریپت عوضش کرد و نمی‌شود در یک کوئری رسانه‌ای مقدار دیگری بهش داد. خاصیت سفارشی هر دو کار را می‌کند، و برای همین تم روشن و تیره با آن یک تعریف است و با پیش‌پردازنده دو برگه سبک جدا.

دو چیزی که هنوز مانده

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

اگر پروژه شما هیچ‌کدام از این دو را لازم ندارد، پیش‌پردازنده فقط یک مرحله ساخت اضافه است که باید نگهداری شود. و اگر لازم دارد، معمولا یک لایه ابزار سبک‌تر هم همان کار را می‌کند بی‌آنکه نحو زبان را عوض کند.

یک قاعده که هر دو طرف را نجات می‌دهد

تودرتویی بیش از سه سطح، چه در پیش‌پردازنده و چه در خود زبان، انتخابگرهایی می‌سازد که هم طولانی‌اند و هم وزنشان بالاست. وزن بالا یعنی برای بازنویسی‌شان باید انتخابگر سنگین‌تری بنویسید، و همان چیزی است که یک برگه سبک را به مسابقه اهمیت تبدیل می‌کند.

قاعده عملی: تودرتویی را فقط برای شبه‌کلاس و شبه‌عنصر و کوئری استفاده کنید، و نه برای بازتولید ساختار HTML. ساختار جای دیگری تعریف شده و تکرارش در برگه سبک یعنی هر تغییر در آن، دو فایل را می‌شکند: عنصرهایی که می‌گویند چه هستند، و به چه کسی کمک می‌کنند.

جایی که کار گیر می‌کند، قالب‌های قدیمی است

بخش بزرگی از قالب‌های فارسی که هنوز نگهداری می‌شوند روی یک پیش‌پردازنده و یک زنجیره ساخت قدیمی بنا شده‌اند و همان زنجیره است که سال‌ها بعد کسی نمی‌تواند اجرایش کند: نسخه‌های ناسازگار، وابستگی‌هایی که از مخزن نمی‌آیند، و اسکریپت ساختی که هیچ‌کس ننوشته است. اگر تنها استفاده‌تان از پیش‌پردازنده متغیر و تودرتویی است، مهاجرت به خود زبان معمولا مکانیکی است و کل مرحله ساخت حذف می‌شود. این یک بهبود در نگهداری است و نه یک تصمیم سلیقه‌ای.

ابزار، و سالی که این حرف درست است

در سال ۲۰۲۶، تودرتویی بومی و تابع ترکیب رنگ در همه مرورگرهای امروزی پشتیبانی می‌شوند و به هیچ مرحله ساختی نیاز ندارند. اگر هنوز پیش‌پردازنده لازم دارید، Sass همچنان جاافتاده‌ترین است، متن‌باز و رایگان، و پیاده‌سازی امروزی‌اش با جاوااسکریپت اجرا می‌شود و نه با روبی که سال‌ها پیش کنار گذاشته شد. جایگزین سبک‌ترش PostCSS است که نحو خود زبان را نگه می‌دارد و فقط چیزهایی را که هنوز پشتیبانی نمی‌شوند ترجمه می‌کند.

پرسش بعدی این است که همین ایده تقسیم و جمع کردن دوباره در سمت جاوااسکریپت چه شکلی دارد، که تکه کردن کد، و دوباره کنار هم گذاشتنش است. و متغیرهایی که این صفحه درباره‌شان بود، بیشترین کاربردشان در یک سند، برای هر اندازه صفحه است.

کنار این

بالای این