مهاجرت از Sass به CSS خالص، قدم به قدم
فرانتاندClaude Opus 5خلاصهٔ کاملتر
سالها Sass چیزهایی به CSS اضافه میکرد که خودش نداشت: متغیر، تابع و تودرتو نوشتن قوانین. کریس اسمیت تو مقالهش میگه اون دوره تموم شده، چون CSS خالص به همهی اینها رسیده و جز کارهای خیلی خاص، دیگه دلیلی برای نگهداشتن Sass نمونده.
به گفتهی نویسنده، Sass تو پروژههای قدیمی ضرری نداره، چون همهچیزش موقع بیلد به CSS کامپایل میشه و اصلاً به مرورگر نمیرسه. ولی خودش چند تا سود دیده: داشتن همزمان custom property های CSS و متغیرهای Sass گیجکننده بود و کد تکراری میساخت، هر فایل .scss یه فایل .css خروجی هم داشت که باید نگهداری و موقع دیپلوی کپی میشد، بیلد کمی سریعتر شده و یه وابستگی و یه چیز کمتر برای یادگرفتن تیم مونده.
خود مسیر مهاجرت سادهست ولی چند جا میشه لیز خورد. اول باید دنبال چیزهایی گشت که فقط Sass بلده، مثل mixin ها یا تابعهایی مثل lighten()؛ اینها یا باید با معادل CSS جایگزین شن یا با همون مقدار کامپایلشده از فایل خروجی قبلی. مهمتر از همه کامنتهای // هستن که تو CSS خالص اصلاً شناخته نمیشن و اگه جا بمونن، قانونهای بعد از اون کامنت پارس نمیشن؛ باید به /* ... */ تبدیل شن.
بعدش نوبت فایلهاست: فایلهای CSS تولیدشدهی کامپایلر بههمراه نسخههای minify و map باید پاک شن، با حواسجمعی که CSS های دستنویس قاطیشون نشه. بعد پسوند .scss ها .css میشه و هر ارجاعی، از تگ link تا styleUrl، آپدیت میشه. نویسنده تاکید داره تست دستی صفحهها رو جدی بگیری، چون یه قانون CSS جاافتاده بیسروصدا خراب میکنه و به چشم نمیاد.
تنها چیزی که واقعاً از دست میره partial های Sass ـه: فایلهای کوچیک مثل _forms.scss که همه با هم تو یه global.css کامپایل میشدن و مرورگر یه درخواست بیشتر نمیفرستاد. تو CSS خالص @import زمان اجرا اتفاق میفته، یعنی یه درخواست دوم که باید پشت اولی صف بکشه. پیشنهاد نویسنده اینه که بهجای import، همون فایلهای کوچیک رو مستقیم تو قالب صدا بزنی؛ از HTTP/2 به بعد تعداد درخواست محدودیت نیست و چند درخواست موازی از یه فایل بزرگ سریعتر درمیاد.
نکات کلیدی:
- CSS خالص حالا متغیر، تابع و nesting داره، پس Sass جز موارد خاص لازم نیست
- کامنتهای // تو CSS پارس نمیشن و قانونهای بعدشون از کار میفتن
- تابعهایی مثل lighten() معادل مستقیم ندارن؛ یا جایگزین یا همون مقدار کامپایلشده
- @import تو CSS خالص زمان اجراست و یه درخواست سریالی اضافه میسازه
- از HTTP/2 به بعد چند فایل کوچیک موازی بهتر از یه باندل بزرگه
