SASS

SASS — درون نگری (Introspection)

آخرین بروزرسانی: 1404/08/17
قبلی: انتخابگرها (Selector) بعدی: رنگ ها (Color)

درون نگری (Introspection)

در Sass، «درون نگری (Introspection)» یعنی بررسی داخل کد. این توابع مثل ابزار دیباگ عمل می کنند. وقتی چیزی کار نکند، کمک می کنند بفهمی مشکل کجاست.

توابع درون نگری Sass به زبان ساده

این توابع وجود ویژگی ها را می سنجند، نوع داده را برمی گردانند، و حتی توابع یا میکسین ها را فراخوانی می کنند.

بررسی پشتیبانی ویژگی: feature-exists

«ویژگی (Feature)» قابلیتی از Sass است؛ این تابع پشتیبانی را می سنجد.

$has-error: feature-exists("at-error");
.support-check {
  --at-error: $has-error;
}

مشاهده در ادیتور

یافتن نوع و واحد: type-of ، unit ، unitless

«نوع (Type)» جنس داده است. «واحد (Unit)» مثل px است.

$t1: type-of(15px);
$u1: unit(15px);
$ul1: unitless(15);
$type-demo {
  --type: $t1;
  --unit: $u1;
  --unitless: $ul1;
}

مشاهده در ادیتور

وجود تابع و میکسین: function-exists ، mixin-exists

این دو، بودنِ یک «تابع (Function)» یا «میکسین (Mixin)» را چک می کنند.

$fok: function-exists("nonsense");
$mok: mixin-exists("important-text");
.exists-demo {
  --func-exists: $fok;
  --mixin-exists: $mok;
}

مشاهده در ادیتور

متغیرها: variable-exists ، global-variable-exists

این ها وجود «متغیر (Variable)» را در محدوده فعلی یا سراسری می سنجند.

$a: 10px;
$b: 2rem !global;
$hasA: variable-exists(a);
$hasBGlobal: global-variable-exists(b);
.var-demo {
  --has-a: $hasA;
  --has-b-global: $hasBGlobal;
}

مشاهده در ادیتور

بررسی @content در میکسین: content-exists

این تابع می گوید آیا به میکسین یک بلوک «@content» پاس داده ای.

@mixin box() {
  @if content-exists() {
    @content;
  }
}
.card {
  @include box() {
    border: 1px solid #ccc;
  }
}

مشاهده در ادیتور

فراخوانی پویا: get-function ، call

با این دو می توانی نام تابع را بگیری و بعد آن را صدا بزنی.

@function double($n) {
  @return $n * 2;
}
$fn: get-function("double");
$result: call($fn, 6);
.call-demo {
  --result: $result;
}

مشاهده در ادیتور

چاپ نمایشی مقدار: inspect

«inspect» مقدار را به رشته قابل خواندن تبدیل می کند.

$val: (a: 1, b: 2);
$seen: inspect($val);
.inspect-demo {
  --seen: "#{$seen}";
}

مشاهده در ادیتور

نکته: برای کار با انتخابگرها به بخش انتخابگرها (Selector) برو. همچنین، رنگ ها را در توابع رنگ (Color) ببین.

سه گام تمرین سریع

  1. با type-of نوع چند مقدار را بررسی کن.
  2. با feature-exists پشتیبانی یک ویژگی را بسنج.
  3. با get-function و call یک تابع را اجرا کن.

جمع بندی سریع

  • feature-exists پشتیبانی قابلیت را چک می کند.
  • type-of و unit اطلاعات مقدار را می دهند.
  • variable-exists و mixin-exists وجود را می سنجند.
  • get-function و call فراخوانی پویا می دهند.
قبلی: انتخابگرها (Selector) بعدی: رنگ ها (Color)