---
id: 5a9d727a424fe3d0e10cad12
title: Use a custom CSS Variable
challengeType: 0
videoUrl: ''
localeTitle: استخدم متغير CSS مخصص
---
## Description
بعد إنشاء المتغير ، يمكنك تعيين قيمته إلى خصائص CSS الأخرى عن طريق الرجوع إلى الاسم الذي قدمته. الخلفية: var (- penguin-skin)؛
سيؤدي ذلك إلى تغيير خلفية أي عنصر تستهدفه باللون الرمادي لأن هذه هي قيمة --penguin-skin
. لاحظ أنه لن يتم تطبيق الأنماط إلا إذا كانت أسماء المتغيرات مطابقة تمامًا.
## Instructions
تطبيق متغير --penguin-skin
إلى الخاصية background
--penguin-skin
penguin-top
، penguin-bottom
، right-hand
left-hand
.
## Tests
```yml
tests:
- text: تطبيق متغير --penguin-skin
إلى الخاصية background
للفئة penguin-top
.
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the --penguin-skin
variable to the background
property of the penguin-top
class.");'
- text: تطبيق متغير --penguin-skin
إلى خاصية background
للفئة penguin-bottom
.
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), "Apply the --penguin-skin
variable to the background
property of the penguin-bottom
class.");'
- text: تطبيق متغير --penguin-skin
على خاصية background
للفئة right-hand
.
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), "Apply the --penguin-skin
variable to the background
property of the right-hand
class.");'
- text: تطبيق متغير --penguin-skin
على خاصية background
للفئة left-hand
.
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), "Apply the --penguin-skin
variable to the background
property of the left-hand
class.");'
```
## Challenge Seed
## Solution
```js
// solution required
```