استایل دهی شرطی در Sass با استفاده از !default

فلگ(flag) !default یک ویژگی برای مقدار دهی و استایل نویسی شرطی در sass هست، با استفاده از این ویژگی مقدار زمانی انجام میشه که قبلا تعریف نشده باشه یا برابر با null باشه

$variable: 'test' !default;

عبارت بالا در sass به شکل زیر تعریف میشه:

مقدار متغییر variable برابر باشه با test، اما در صورتی که متغییر variable قبلا مقدار دهی نشده باشه.

برای آشنایی بهتر با عملکرد این flag مثال زیر باهم ببینم:

$variable: 'hello world'; 
$variable: 'test' !default;
// $variable still contains `hello world`

با اجرای کد بالا، مقدار متغییر همچنان برابر با "hello world" هست که در خط اول مقدار دهی شده و با خط دوم مقدارش تغییری نمیکنه و ignore میشه.

آشنایی با استایل دهی از طریق @use...with

یکی از مهم ترین دلایل استفاده از !default استفاده همزمان از لایبراری های جانبی در بخش های مختلف پروژه هست. ممکنه شما از یک لایبری استفاده کنید با تعریف همنام متغییر هاتون به تداخل بخورین، اما زمانی که از !default استفاده کنین در صورتی که همنام باشن مقدار دهی از ریشه اصلی استفاده میشه. توی sass یک ویژگی بسیار کاربردی برای زمانی هست که شما یک لایبرری رو اضافه میکنین و میخواین متغییر های موجود در اون لایبرری رو overrdie کنین:

@use 'library' with (
 $foo: 'hello', $bar: 'world'
 );

کد بالا عملکرد مشابهی به @import داره:

$foo: 'hello'; 
$bar: 'world'; 
@import 'library';

اما یک فرق اساسی داره، و دلیلی که پیشنهاد میشه از @use...with استفاده کنین تفاوت scope هست، جدای از این تفاوت اینکه کد برای توسعه دهنده خواناتر میشه override کردن مقادیر زمان اضافه کردن هست، همچنین باعث تعریف بیش از حد متغییر در سطح پروژه میشه، از طرف دیگه متغییر های global رو حفظ میکنه برای ما.

رایج ترین استفاده ها: مورد اول: شخصی سازی قالب

$color-primary: royalblue !default;
$color-secondary: salmon !default: 
// style.scss@use 'library' with (
$color-primary: seagreen !default;
$color-secondary: lemonchiffon !default:
);

یکی از مناسبترین مثال هایی که میشه برا کاربرد!default زد اضافه کردن ویژگی شخصی سازی تم برای سایر دولوپر ها و کاربر هاست. برای مثال بخش رنگ بندی قالب رو میتونیم به صورت آپشنال قرار بدیم تا نسبت به نیاز کاربر تغییر داده بشه.

برای مثال لایبراری بوت استرپ تو بخش Sass variable API های خودش همه متغییر هارو با استفاده !default در دسترس قرار داده. ( این متغییر ها شامل: رنگ بندی، کادر بندی، فاصله ها ،تنظیمات فونت و حتی انیمیشن ها میشه) البته شما میتونین بدون استفاده از Sass هم از این ویژگی استفاده کنین، میتونین به این لینک مراجعه کنین.

مورد دوم: لود کردن وب فونت ها به صورت شرطی

// library.scss
$disable-font-cdn: false !default;
@if not $disable-font-cdn {
  @import url(''https://fonts.googleapis.com/css2?family=Public+Sans&display=swap'');
}
// style.scss
@use 'library' with (
$disable-font-cdn: true
);
// no external HTTP request is made

همونطور که تو کد بالا میبینین یک متغییر برابر با false شده و با استفاده از یک شرط اون متغییر رو بررسی میکنیم که وب فونت رو لود کنیم یانه، اینجاس که sass قدرت خودش تو پیش پردازنده هارو به نمایش میذاره.

شما میتونین برای مطالعه بیشتر راجب این ویژگی ها به مطالب زیر مراجعه کنید:

• !default documentation
• @use with documentation
• Bootstrap variable defaults
• A Sass default use case (thoughtbot)

از اینکه این مطلب رو مطالعه کردین ممنونم، خوشحال میشم نظراتتون تو بخش کامنت ها ببینم.

برخی از مطالب من در ویرگول: