sass의 코드 중첩

SCSS를 사용하면 CSS 코드를 훨씬 빠르고 간단하게 작성할 수 있습니다. 이를 달성하는 데 도움이 되는 방법 중 하나는 코드 중첩 기능을 활용하는 것입니다. 일반 CSS에서 각 항목에는 별도의 코드가 포함되어 있어 관리할 수 없는 엄청난 양의 코드가 생성될 수 있으므로 훨씬 더 복잡해집니다.

예시;
세 가지 항목, 즉 외부 클래스가 있는 부모 div, 내부 클래스가 있는 자식 div, 내부 div 안에 단락이 있다고 생각해 보세요.

   // .html file - not HTML commenting syntax
<div class="outer">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

CSS에서 이러한 항목에 몇 가지 스타일을 적용하면 다음과 같습니다.

//.css file - not CSS commenting syntax
.outer { 
  background-color: #cd6799;
  border-radius: 15px;
}

.outer .inner {
  text-align: center;
  text-transform: uppercase;
}

.outer .inner p {
  color: #ffffff;
}

외부 div에 마우스를 가져가야 하는 경우 약간 복잡해집니다.

//.css file - not CSS commenting syntax
.outer:hover() {
  box-shadow: 2px 2px 12pc rgba(0, 0, 0, 0.4);
}

SCSS를 사용하여 다음과 같이 항목 계층 구조를 기반으로 코드를 그룹화/중첩할 수 있습니다.

//.scss file
.outer {
  background-color: #cd6799;
  border-radius: 15px;
  .inner {
    text-align: center;
    text-transform: uppercase;
    p {
      color: #ffffff;
    }
  }
}

필요한 경우 SCSS를 사용할 때 외부 div에 호버 효과를 적용하는 것은 매우 간단합니다.

//.scss file
.outer {
  background-color: #cd6799;
  border-radius: 15px;
  .inner {
    text-align: center;
    text-transform: uppercase;
    p {
      color: #ffffff;
    }
  }
  &:hover {
    box-shadow: 2px 2px 12pc rgba(0, 0, 0, 0.4);
  }
}

SCSS를 사용하는 동안 중첩에 대한 실제 제한은 없지만 좋은 코드 디자인을 위해서는 결과 CSS를 관리 가능한 상태로 유지하려면 세 가지 수준이 충분히 효율적이어야 합니다.

Applying the hover pseudoclass in the SCSS example above, we used the ‘&’ symbol. The is one of the most useful symbols that is utilized in SCSS. Basically, this symbol is used in many instances. In our example, it was useful in accessing the class outer which had already been defined. So instead of repeating the same selector or class like .outer, using the '&' symbol grants us access to the class name.
Simply put, the & symbol repeats the immediate parent within the nesting levels as demonstrated.

BEM 명명 방법(Block Element Modifier)을 사용할 수도 있습니다. 예를 들어 사용자 정보에 크고 작은 이미지가 있다고 가정하면 두 개의 밑줄을 적용하여 다른 항목을 자체 수준으로 구분하고 두 개의 하이픈을 적용하여 이미지를 구분하는 BEM 방법을 사용할 수 있습니다. 예시;

//.scss file
.user__box {
  background-color: #cd6799;
  .user__grid {
    display: flex;
    flex-direction: column;
    .user__image—small {
      width: 100%;
    }
    .user__image—large {
      max-width: 50%;
    }
    .user-info {
      color: #ffffff;
      text-align: center;
    }
  }
}

출력은 다음과 같습니다.

//.css file - not actual css commenting syntax
.user__box {
  background-color: #cd6799;
}
.user__box .user__grid {
  display: flex;
  flex-direction: column;
}
.user__box .user__grid .user__image—small {
  width: 100%;
}
.user__box .user__grid .user__image—large {
  max-width: 50%;
}
.user__box .user__grid .user-info {
  color: #ffffff;
  text-align: center;
}

마지막으로 다양한 선택기에 적용된 CSS 속성을 중첩할 수도 있습니다. 예시;

//.scss file
body {
  background: {
    color: rgba(0, 0, 0, 0.3);
    image: url(‘images/header.png’);
    repeat: no-repeat;
    position: top;
  }
}

그 결과 ;

//.css file - not actual css commenting syntax.
body {
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url(‘images/header.png’);
  background-repeat: no-repeat;
  background-position: top;
}