/* Root */
:root{
  --myColor: #2D4059;
  --myColor2: #EA5455;
  --myColor3: #F07B3F;
  --myColor4: #FFD460;
  --mySize: 16px;
}

/* Título usando una variable de :root */
h1 {
  margin: var(--mySize);
  font-weight: 300;
}

/* Padre usando una variable de :root */
.padre{
  border: 3px solid black;
  width: 250px;
  margin: var(--mySize);
}

/* Hijos */
.padre .uno, .padre .dos, .padre .tres, .padre .cuatro {
  width: 100%;
  height: 100px;
}

/* Hijos usando variables */
.padre .uno {
  background: var(--myColor);
}

.padre .dos {
  background: var(--myColor2);
}

.padre .tres {
  background: var(--myColor3);
}

.padre .cuatro {
  background: var(--myColor4);
}