<p>●普通の書き方</p>
<div class="macaroon">
  <div class="yellow"></div>
  <div class="pink"></div>
</div>

<p>●変数を使った書き方</p>
<div class="chocolateーmint">
  <div class="brown"></div>
  <div class="mint"></div>
</div>
p {
  color: #666;
}
/*普通の書き方*/
.macaroon {
  position: relative;
  width: 300px;
  height: 300px;
  
  .yellow {
    background-color: rgba(255,245,163, 0.8);
    width: 200px;
    height: 200px;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .pink {
    background-color: rgba(242,188,188,0.8);
    width: 200px;
    height: 200px;
    border-radius: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
  }
}

/*SCSSの変数を使った書き方*/
$brown: #795F45;
$mint: #BEE4D7;

.chocolateーmint {
  position: relative;
  width: 300px;
  height: 300px;
  
  .brown {
    background-color: rgba($brown, 0.8);
    width: 200px;
    height: 200px;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mint {
    background-color: rgba($mint,0.8);
    width: 200px;
    height: 200px;
    border-radius: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.