الدوال

The CSS Podcast - 020: Functions

حتى الآن في هذه الدورة التدريبية، تعرّفت على العديد من دوال CSS. في وحدة الشبكة، تمّ تعريفك على minmax() وfit-content()، اللذَين يساعدانك في تحديد حجم العناصر. في وحدة اللون، تعرّفت على rgb() وhsl()، اللذَين يساعدانك في تحديد الألوان.

مثل العديد من لغات البرمجة الأخرى، تتضمّن CSS الكثير من الدوالّ المضمّنة التي يمكنك الوصول إليها متى احتجت إليها.

لكل دالة CSS غرض محدّد، وفي هذا الدرس، ستحصل على نظرة عامة عالية المستوى، تمنحك فهمًا أفضل بكثير لأماكن استخدامها وكيفية استخدامها.

ما هي الدالة؟

الدالة هي مقتطف رمز مُسمّى ومستقلّ يُكمِل مهمة معيّنة. يتمّ تسمية الدالة كي تتمكّن من استدعائها في رمزك البرمجي ويمكنك تمرير البيانات إليها. ويُعرف ذلك باسم تمرير الوسيطات.

إنّ الكثير من دوالّ CSS هي دوالّ أساسية، ما يعني أنّه في حال تمّ تمرير الوسيطات نفسها إليها، ستعرض لك دائمًا النتيجة نفسها، بغض النظر عمّا يحدث في بقية الرمز البرمجي. غالبًا ما تتم إعادة احتساب هذه الدوالّ عند تغيير القيم في CSS، على غرار العناصر الأخرى في اللغة، مثل القيم المتسلسلة المحسوبة مثل currentColor.

في CSS، يمكنك استخدام الدوال المقدَّمة فقط، بدلاً من كتابة دوال خاصة بك، ولكن يمكن تداخل الدوال مع بعضها في بعض السياقات، ما يمنحها مرونة أكبر. سنتناول ذلك بمزيد من التفصيل لاحقًا في هذه الوحدة.

أدوات الاختيار الوظيفية

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

لقد تعرّفت على أدوات الاختيار الوظيفية في وحدة الفئات الزائفة التي تفصّل الدوالّ مثل :is() و:not(). الوسيطات التي يتم تمريرها إلى هذه الدوالّ هي أدوات اختيار لغة CSS، التي يتم تقييمها بعد ذلك. في حال تطابق العناصر، سيتم تطبيق باقي قاعدة CSS عليها.

الخصائص المخصّصة وvar()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

السمة المخصّصة هي متغيّر يتيح لك تقسيم القيم في رمز CSS. تتأثر أيضًا المواقع المخصّصة بالترتيب الهرمي ، ما يعني أنّه يمكن التلاعب بها أو إعادة تحديدها وفقًا للسياق. يجب أن تسبِق البادئة "--" الموقع المخصّص، ويجب أن تكون الحالة حساسة.

تستخدِم الدالة var() مَعلمة واحدة مطلوبة: السمة المخصّصة التي تحاول عرضها كقيمة.

في المقتطف السابق، تم تمرير --base-color كدالة var() كوسيطة. إذا تمّ تحديد --base-color، ستُعرِض var() القيمة.

.my-element {
    background: var(--base-color, hotpink);
}

يمكنك أيضًا تمرير قيمة بيان احتياطي إلى الدالة var(). وهذا يعني أنّه إذا تعذّر العثور على --base-color، سيتم استخدام البيان الذي تم تمريره بدلاً من ذلك، وهو في هذا العيّنة هو اللون hotpink.

الدوالّ التي تعرض قيمة

دالة var() هي إحدى دوالّ CSS التي تعرِض قيمة. تتّبع الدوالّ مثل attr() و url() بنية مشابهة لدالة var()، فيمكنك تمرير وسيطة واحدة أو أكثر واستخدامها على الجانب الأيمن من تعريف CSS.

a::after {
  content: attr(href);
}

تأخذ الدالة attr() هنا محتوى سمة href للعنصر <a> وتضبطه على أنّه content للعنصر النائب ::after. إذا تغيّرت قيمة سمة href لعنصر <a>، سيظهر ذلك تلقائيًا في سمة content هذه.

.my-element {
    background-image: url('/path/to/image.jpg');
}

تأخذ الدالة url() سلسلة عنوان URL وتُستخدَم لتحميل الصور والخطوط والمحتوى. إذا لم يتم إدخال عنوان URL صالح أو تعذّر العثور على المورد الذي يشير إليه عنوان URL، لن تعرض الدالة url() أيّ محتوى.

وظائف الألوان

لقد تعرّفت على كل شيء عن دوالّ الألوان في وحدة اللون. ننصحك بقراءة هذه المقالة إذا لم يسبق لك ذلك.

تشمل بعض دوال الألوان المتاحة في CSS: rgb() وhsl() وlab() وlch() وoklab() وoklch() وcolor(). ولكل هذه الدوال شكل مشابه يتم فيه تمرير وسيطات الإعدادات وعرض لون.

التعبيرات الحسابية

مثل العديد من لغات البرمجة الأخرى، توفّر لغة CSS دوالّ رياضية مفيدة للمساعدة في تنفيذ أنواع مختلفة من العمليات الحسابية.

الدوال الحسابية

calc()

تستخدِم الدالة calc() عبارة رياضية واحدة كمعلَمة لها. يمكن أن يكون هذا التعبير الرياضي مزيجًا من الأنواع، مثل الطول والعدد والزاوية ومعدّل التكرار. ويمكن أيضًا استخدام وحدات مختلطة.

.my-element {
    width: calc(100% - 2rem);
}

في هذا المثال، يتم استخدام الدالة calc() لتحديد حجم عرض العنصر بنسبة% 100 من العنصر الرئيسي الذي يحتوي عليه، ثم إزالة 2rem من هذه القيمة المحسوبة.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

يمكن إدراج دالة calc() داخل دالة calc() أخرى. يمكنك أيضًا تمرير سمات مخصّصة في دالة var() كجزء من تعبير.

min() وmax()

تعرض الدالة min() أصغر قيمة محسوبة لوسيطة واحدة أو أكثر تم تمريرها. تؤدي الدالة max() العكس: الحصول على أكبر قيمة للوسيطة التي تم تمريرها مرة واحدة أو أكثر.

.my-element {
  width: min(20vw, 30rem);
  height: max(20