35 lines
2.1 KiB
Markdown
35 lines
2.1 KiB
Markdown
|
---
|
||
|
|
title: Cascading CSS Variables
|
||
|
|
localeTitle: المتتالية CSS المتغيرات
|
||
|
|
---
|
||
|
|
## المتتالية CSS المتغيرات
|
||
|
|
|
||
|
|
متغيرات CSS المتتالية تسمى رسميًا الخصائص المخصصة هي كيانات تتصرف بالمثل مع المتغيرات التقليدية. في هذه المتغيرات تسمح لتخزين البيانات وتحديثها لتعكس القيم الجديدة في وقت لاحق 2 .
|
||
|
|
|
||
|
|
يتم تعريف متغيرات CSS لاحتواء قيم محددة وإعادة استخدامها في جميع أنحاء المستند. يتم تعيينها باستخدام تدوين الخاصية المخصصة (على سبيل المثال ، `--main-color: black` ) ويتم الوصول إليها باستخدام الدالة `var()` (على سبيل المثال ، `color: var(--main-color)` ) 1 . قم بتعريف متغير CSS في `:root` محددات `:root` أو `body` للوصول العام.
|
||
|
|
|
||
|
|
عند الحفاظ على مستندات CSS معقدة ، ليس من المفيد فقط استخدام متغيرات CSS ولكن أيضًا ذكية. عند إجراء تحديثات مستقبلية بدلاً من البحث عن مئات الأسطر البرمجية المحتملة ، يحتاج المرء فقط إلى تحديث متغير CSS اللازم 1 .
|
||
|
|
|
||
|
|
### بناء الجملة
|
||
|
|
|
||
|
|
`:root {
|
||
|
|
--main-bkgnd-color: #00B8CB;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--main-bkgnd-color);
|
||
|
|
font-family: 'Raleway', Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
التصريح عن المتغير:
|
||
|
|
|
||
|
|
`--custom-name: value
|
||
|
|
`
|
||
|
|
|
||
|
|
باستخدام المتغير: `css var(--custom-name)`
|
||
|
|
|
||
|
|
### مصادر
|
||
|
|
|
||
|
|
1. [قم بزيارة صفحة متتالية CSS CSS الخاصة بـ MDN للحصول على مزيد من المعلومات.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
|
||
|
|
2. [بيرنا ، ماريا أنطونييتا. "دليل عملي إلى متغيرات CSS (خصائص مخصصة)" _sitepoint_ . 1 أغسطس 2018. تم الوصول إليها: 5 أكتوبر 2018](https://www.sitepoint.com/practical-guide-css-variables-custom-properties/)
|