الدالة `if` في SASS

تشرح هذه المقالة الدالة if في SASS۔

سنستعرض كل شيء من أساسيات الدالة if إلى التقنيات المتقدمة خطوة بخطوة۔

YouTube Video

الدالة if في SASS

الدالة if() هي دالة شرطية بسيطة توفرها SASS وترجع إحدى قيمتين بناءً على شرط منطقي (Boolean)۔ وهي مشابهة للمعامل الثلاثي (ternary) في JavaScript۔

الصياغة

الصياغة كما يلي:۔

1// if(condition, trueValue, falseValue)

• إذا كانت condition تساوي true فسترجع trueValue؛ وإذا كانت false فسترجع falseValue۔

الاستخدام الأساسي

على سبيل المثال، يمكنك استخدام الدالة if() لتغيير ألوان الخلفية والنص اعتمادًا على ما إذا كانت السمة داكنة أم فاتحة۔

كود نموذج

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}

• إذا كان المتغير $theme يساوي "dark"، تصبح الخلفية سوداء مع نص أبيض؛ وإذا كان "light"، تصبح الخلفية بيضاء مع نص أسود۔

CSS المُولّد

1body {
2  background-color: black;
3  color: white;
4}

• نظرًا لأن المتغير $theme هو "dark"، فالخلفية سوداء مع نص أبيض۔

أوجه الاختلاف بين العبارة @if والدالة if()

يوفر Sass عبارة @if ودالة if() للتفريع الشرطي، لكنهما يُستخدمان لأغراض مختلفة۔

كود نموذج

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}

• تتحكم عبارة @if في الشيفرة التي تُخرَج عند ترجمة Sass۔
• أما دالة if() فتعيد قيمة، وتُستخدم لتبديل القيم ديناميكيًا داخل التعابير۔

CSS المُولّد

1body {
2  background-color: black;
3  color: white;
4}

• في هذا المثال، نظرًا لأن $theme تساوي "dark"، يتم تطبيق خلفية سوداء ولون نص أبيض۔
• الاختلافان الرئيسيان هما أن عبارة @if تتحكم في البنية، وأن دالة if() تُعيد قيمة۔

استخدام دوال if متداخلة

عندما تحتاج إلى تفرعات معقدة، يمكنك تداخل دوال if۔

كود نموذج

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}

• إذا كان $theme هو "dark" فسترجع اللون الأسود؛ وإذا كان "light" فسترجع اللون الأبيض؛ وإلا فسترجع القيمة الافتراضية ($custom-color)۔

CSS المُولّد

1body {
2  background-color: blue;
3}

• وبما أن المتغير $theme هو custom، يكون لون الخلفية أزرقًا۔

حالات استخدام عملية

تبديل السمة

فيما يلي مثال يغير أنماط الأزرار بناءً على السمة۔

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}

• هذا الكود مثال شرطي في SASS يبدل ألوان خلفية الزر ونصه وحدوده بناءً على قيمة المتغير $theme۔ تُستخدم الدالة if() لضبط الأنماط ديناميكيًا للسمات الداكنة والفاتحة۔

CSS المُولّد

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• من خلال تبديل السمة، يمكنك تغيير التصميم العام بشكل موحد۔

مثال متقدم: ضبط تباين الألوان ديناميكيًا

لننظر إلى مثال يضبط لون النص تلقائيًا اعتمادًا على لون الخلفية۔

كود نموذج

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}

• تُستخدم الدالة color.channel() للحصول على إضاءة لون الخلفية (lightness)۔ إذا كانت تلك القيمة أكبر من 50%، يُختار الأسود؛ وإن كانت أصغر، يُختار الأبيض كلون للنص، مما يُحسّن التباين مع الخلفية تلقائيًا۔

CSS المُولّد

1body {
2  background-color: #000;
3  color: white;
4}

• باستخدام دالة if() يمكنك تنفيذ أنماط مرنة تراعي قابلية الوصول في التصميم، مثل ضبط التباين۔

الدمج مع @function

يتيح استخدام دالة if داخل @function تصميم أنماط أكثر مرونة۔

كود نموذج

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}

• يوضح هذا الكود استخدام if() داخل @function لإرجاع الألوان المناسبة بناءً على السمة ونوع اللون۔ يتيح ذلك تصميم أنماط متسقة وقابلة لإعادة الاستخدام لكل سمة۔

CSS المُولّد

1body {
2  background-color: black;
3  color: white;
4}

• من خلال إنشاء واستخدام دوال مساعدة تستفيد من دالة if()، يمكنك تحسين قابلية صيانة المشروع بأكمله۔

ملاحظات

1. لا يمكن استخدام الدالة if مع القيم الديناميكية لأن CSS لغة ثابتة بذاتها، تقوم دالة if بتحديد القيم وقت تجميع SASS۔ للمنطق الشرطي أثناء التشغيل، تحتاج إلى استخدام JavaScript۔

2. اجعل القابلية للقراءة أولوية لأن دوال if المتداخلة قد تصبح معقدة وتضر بقابلية القراءة، يمكنك استخدام SASS @mixin و@function حسب الحاجة لتنظيم الكود۔

الخاتمة

دالة if في SASS أداة قوية ترجع قيمًا مختلفة اعتمادًا على الشروط۔ وهي مفيدة ليس فقط للشرطيات البسيطة، بل أيضًا في العديد من السيناريوهات مثل تبديل السمة وإعداد الأنماط الديناميكية۔ ومع ذلك، عند التعامل مع شروط معقدة، انتبه للقابلية للقراءة واستفد من @mixin و@function لتحسين قابلية الصيانة۔

من خلال إتقان دالة if، يمكنك تحقيق تصميم أنماط أكثر كفاءة ومرونة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video