---
id: 5d822fd413a79914d39e98d9
title: الخطوة 17
challengeType: 0
dashedName: step-17
---

# --description--

غيّر قيمة المُتغير الخاص بك من `#999` إلى `#aa80ff` ويمكنك أن ترى كيف يتم تطبيقه في كل مكان تستخدم فيه المتغير. وهذه هي المِيزة الرئيسة لاستخدام المتغيرات، أن تكون قادراً على تغيير العديد من القيم بسرعة في ورقة تصميمك بمجرد تغيير قيمة المٌتغير.

# --hints--

يجب عليك تغيير قيمة مُتغير الخاصية `--building-color1` من `#999` إلى `#aa80ff`.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </head>

  <body>
    <div class="background-buildings">
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
    </div>
  </body>
</html>
```

```css
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
--fcc-editable-region--
  --building-color1: #999;
--fcc-editable-region--
}

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1b {
  width: 80%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1c {
  width: 90%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1d {
  width: 100%;
  height: 70%;
  background-color: var(--building-color1);
}

```

