SCSS

by Alex Liu

HTML

<div class="container1 container">
  <p>Hello World</p>
  <button>button</button>
</div>
<div class="container2 container">
  <p>Hello World again</p>
</div>

SCSS

:root {
  --global-color: #666;
  --global-bg-color: #789789;
}

.container {
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

.container1 {
  --global-color: #defdef;
  color: var(--global-color);
  background: var(--global-bg-color);
  

  button {
    color: var(--undefined-variable);
  }
}
.container2 {
  margin-top: 20px;
  color: var(--global-color);
}