[SCSS] Organize Styles with SCSS Nesting and the Parent Selector

SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us understand relationships between styles. The SCSS parent selector represents the parent class, so it can DRY up targeting pseudo-elements/classes and be an asset for naming conventions. 

 

.box {

  &-container { /* .box-container, & --> .box*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }

  transition: all 0.8s ease-in-out;
  &:hover {
    background-color: #ff4d4d;
    transform: rotate(360deg);
  }
  background-color: #5fb3ce;
  border: 1px solid burlywood;
  font-size: 1.5em;
  width: 200px;
  height: 200px;
}

 

To css:

.box {
  transition: all 0.8s ease-in-out;
  background-color: #5fb3ce;
  border: 1px solid burlywood;
  font-size: 1.5em;
  width: 200px;
  height: 200px; }
  .box-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh; }
  .box:hover {
    background-color: #ff4d4d;
    transform: rotate(360deg); }