[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); }

巴特西

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

最新文章

热门文章