کاهش تکرار سبک با توابع CSS

حفظ برگه‌های سبک نگارش بزرگ اغلب منجر به منطق تکراری می‌شود، به‌ویژه هنگام سروکار داشتن با نشان‌های سیستم طراحی مانند گرادیان‌ها یا الگوهای چیدمان واکنش‌گرا.

قانون CSS @function به شما امکان می‌دهد این منطق را در توابع پارامتری قابل‌استفاده مجدد کپسوله کنید و CSS خود را قابل‌نگهداری‌تر، سازگارتر و DRY (خودتان را تکرار نکنید) کنید.

نحو @function

تابع سفارشی بااستفاده از قانون @function و به‌دنبال آن نام خط‌تیره‌دار و فهرستی از پارامترها تعریف می‌شود. این تابع بااستفاده از ویژگی result مقداری را برمی‌گرداند.

@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
  /* Logic goes here */
  result: var(--input1);
}

مفاهیم کلیدی

• پارامترها: باید با دو خط تیره (--) شروع شود.
• پیش‌فرض‌ها: می‌توانید بااستفاده از دونقطه (:) مقادیر پیش‌فرض ارائه دهید.
• نتیجه: ویژگی result مقداری را که تابع برمی‌گرداند تعیین می‌کند. آخرین result اعلام‌شده در بدنه تابع برنده می‌شود.
• محدوده: پارامترها و متغیرهای تعریف‌شده در تابع دارای محدوده محلی هستند.
• انواع: می‌توانید پارامترها و مقدار برگشتی را ملزم کنید که با نوع CSS با نمادگذاری براکت مطابقت داشته باشند (مثلاً <color>) و با تابع type اجازه دهید چندین نوع وجود داشته باشد (مثلاً type(<number> | <percentage>)).

نمونه‌های کاربردی

۱. کدهای سیستم طراحی (گرادیان‌ها)

با کپسوله‌سازی منطق طیف رنگی، از یکسان بودن طیف‌های رنگی در سراسر برنامه‌تان مطمئن شوید. ‫--angle مقدار پیش‌فرضی را برای ارائه سازگاری فراهم می‌کند که می‌توان آن را لغو کرد.

@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}

.card {
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

۲. منطق چیدمان شرطی

می‌توانید از @media یا پُرسمان‌های دیگر مستقیماً در داخل تابع استفاده کنید تا مقادیر مختلفی را براساس محیط برگردانید. هنگام استفاده از منطق شرطی در یک تابع، توجه داشته باشید که @function در اولین مقدار result «برنمی‌گردد»، بلکه از آبشار CSS پیروی می‌کند و به آخرین مقداری که براساس اندازه صفحه، اندازه ظرف، یا پُرسمان دیگر مطابقت دارد، حل می‌شود.

@function --grid-template(--count <number>){
  /* MANDATORY: Put default value first. */
  result: 1fr; /* Default: stack */
  @media (min-width: 800px) {
    result: repeat(var(--count), 1fr); /* Grid on larger screens */
  }
}

main {
  display: grid;
  grid-template-columns: --grid-template(2);
}

روال‌های مطلوب

• استفاده از نام‌های خط‌تیره‌دار: همیشه نام‌ها و پارامترهای تابع خود را با -- پیشوند کنید.
• ارائه مقادیر پیش‌فرض: با ارائه مقادیر پیش‌فرض منطقی، توابع خود را قوی‌تر کنید.
• ساده نگه دارید: از توابع برای منطقی استفاده کنید که واقعاً تکراری یا پیچیده است. جفت‌های مقدار-ویژگی ساده را بیش‌ازحد پیچیده نکنید.
• استفاده از انواع: مطمئن شوید که پارامترها و مقادیر برگشتی از نوع موردانتظار باشند.
• جایگزین‌های پیش‌کامپایل‌شده را درنظر بگیرید: برای توابعی که به ورودی کاربر، پرسمان‌های رسانه، یا دیگر انواع سمت کارخواه وابسته نیستند، استفاده از پیش‌کامپایلر CSS را درنظر بگیرید تا از انجام کارهای غیرضروری در سمت کارخواه جلوگیری شود.

راهبردهای جایگزین

در مرورگرهایی که از «توابع CSS» پشتیبانی نمی‌کنند، مقادیر تنظیم‌شده بااستفاده از توابع CSS نامعتبر خواهند بود. برای پشتیبانی از مرورگرهای دیگر، ابتدا مقدار بازگشتی برای ویژگی ارائه دهید. این مورد در مرورگرهایی که از تابع CSS پشتیبانی می‌کنند لغو خواهد شد.

.card {
  /* Provide fallback, in this case a solid color. */
  background: #5d87e9;
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

main {
  /* Provide fallback, in this case a simple stacked default. */
  grid-template-columns: 1fr;
  grid-template-columns: --grid-template(2);
}

اگر لازم است تکرار سبک را کاهش دهید و درعین‌حال از مرورگرهای دیگر پشتیبانی کنید، پیش‌کامپایلر CSS با توابعی مثل Sass را درنظر بگیرید.