sass
중첩

기본 중첩

새 규칙 을 다른 규칙 안에 선언 할 때마다 중첩이라고합니다. 기본 중첩을 사용하면 아래에 표시된 것처럼 중첩 된 선택기가 모든 부모가 앞에 추가되고 공백으로 구분 된 새 CSS 선택기로 컴파일됩니다.

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

중첩 깊이

중첩은 매우 강력한 기능이지만주의해서 사용해야합니다. 그것은 아주 쉽고 빠르게 일어날 수 있습니다. 둥지에서, 둥지에, 둥지에있는 모든 아이들을 포함하여 둥지를 틀고 계속해서 시작하십시오. 내가 보여 줄게 :

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

문제들

특성

위 예제의 li 에는 margin 설정되어 있습니다. 나중에 미디어 쿼리에서이를 덮어 쓰고 싶다고 가정 해 봅시다.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

따라서 중첩을 너무 깊게하면 결과적으로 특정 값을 덮어 쓸 때마다 다시 깊이 중첩해야합니다. 더 나쁜 것은, 이것은 종종 규칙이 !important 곳에서 사용되는 곳입니다.

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

왜 !important 관념은 나쁜 생각입니까?

SCSS를 작성하는 것이 좋습니다. 이러한 해결 방법은 처음부터 필요하지 않습니다. 그런 사소한 문제에 !important 를 사용하면 이미 토끼 구멍이 생길 것입니다!

재사용 성

이는 특이성 문제와 상당히 유사하지만 별도로 지적 할만한 가치가 있습니다. 버튼이나 드롭 다운과 같은 스타일을 사용하면 페이지의 다른 스타일을 다시 사용할 수 있습니다.

너무 깊게 중첩하면 스타일이 가장 바깥 쪽 부모 (SCSS 맨 위에있는 요소) 안에있는 요소에만 바인딩됩니다. 이렇게하면 스타일을 복사하여 다른 곳에 붙여 넣을 수 있습니다. 아마도 다른 중첩 규칙에있을 수 있습니다.

스타일 시트는 점점 커지고 유지 보수하기가 더 어려워 질 것입니다.

얼마나 깊숙이 둥지를 틀어 야합니까?

대부분의 스타일 가이드는 최대 깊이를 2로 설정합니다. 이것은 일반적으로 좋은 조언이며, 더 깊숙이 자리 잡기를 원하는 경우는 거의 없습니다. 대부분의 시간은 2 분이면 충분합니다.

@ at-root로 중첩

네 스팅은보다 구체적인 선택기를 만드는 데 가장 자주 사용되지만 코드 구성을 위해 간단하게 사용할 수도 있습니다. @at-root 지시문을 사용하면 Sass에서 중첩하는 위치에서 '뛰어 내고'최상위 레벨로 되돌릴 수 있습니다. 이렇게하면 필요 이상으로 특수성을 만들지 않고 스타일을 그룹화 된 상태로 유지할 수 있습니다.

예를 들어 다음과 같이 할 수 있습니다.

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

이것은 다음과 같이 컴파일됩니다.

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

이렇게하면 .item 클래스와 관련된 모든 스타일이 SCSS에 함께 포함되지만 모든 선택자에 반드시 해당 클래스가 필요하지는 않습니다.

컨텍스트 제외

@at-root 내부의 선언은 기본적으로 모든 컨텍스트에 나타납니다. 즉, 예를 들어 @media 블록 내부의 규칙은 그대로 유지됩니다.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

이것은 항상 바람직한 동작이 아니므로 @at-root 지시문의 without 옵션에 media 를 전달하여 미디어 컨텍스트를 제외 할 수 있습니다.

@at-root (without: media) {..

자세한 내용은 공식 문서를 참조하십시오.

상위 선택기 (&)

중첩은 관련 선택기를 함께 유지하면 향후 개발자가 코드를 더 쉽게 이해할 수 있습니다. 앰퍼샌드 ( "&")로 표시되는 상위 선택자는 더 복잡한 상황에서이를 수행하는 데 도움이 될 수 있습니다. 여러 가지 방법으로 사용할 수 있습니다.

부모 셀렉터 뒤에 새로운 셀렉터를 직접 배치하여 부모 셀렉터와 다른 요소를 동일한 요소에 추가해야하는 새 셀렉터를 만듭니다.

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

부모가 중첩 된 선택 후 부모 선택기를 배치하여 컴파일 된 CSS에서 중첩 된 선택 후 표시가 있습니다.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

상태와 의사 요소

클래스와 자식에 중첩을 사용하는 것 외에도 부모 선택자로 중첩하는 것은 일반적으로 링크의 상태 :active , :hover 및 :focus 를 결합하는 데 사용됩니다.

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

마찬가지로 부모 선택자로 중첩하여 가상 요소를 스타일 할 수 있습니다.

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

중첩 속성

일부 CSS 속성은 네임 스페이스에 속합니다. 예를 들어 border-right 는 border 네임 스페이스에 속합니다. 적은 글을 쓰기 위해서 우리는 프로퍼티 네 스팅 (property nesting)을 활용할 수 있으며, 심지어 여러 레벨에서이 프리픽스를 건너 뛸 수 있습니다.

.borders 라는 클래스의 오른쪽과 왼쪽에 테두리를 만들어야 할 필요가 있다면 다음과 같이 작성할 수 있습니다.

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

이렇게하면 border-right 와 border-left 를 써야하는 번거 로움을 덜어줍니다. 그러나 우리는 여전히 반복적 인 코드를 1px solid black 과 1px solid red 있습니다. 우리는 folowing으로 여전히 덜 반복적 인 CSS를 작성할 수 있습니다 :

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}