네이티브 CSS와 Sass 중첩의 차이점

중첩 선택기 구문은 한때 캐스케이딩 스타일 시트(CSS)에 없었지만, 이제 최신 웹 브라우저에 공식 기능으로 통합되어 사용자가 이 기능을 실험하고 활용할 수 있게 되었습니다. 이전에는 중첩 선택기 기능을 사용하려면 Sass와 같은 외부 CSS 전처리기에 의존해야 했습니다.

Sass에서 네이티브 CSS로 전환할 때는 중첩 메커니즘의 불일치를 고려해야 합니다. 두 가지 형태의 중첩에는 원활한 마이그레이션 프로세스를 위해 반드시 인지해야 하는 고유한 특성이 있습니다. 이러한 차이점을 이해하는 것은 네이티브 CSS 구문과의 호환성을 보장하는 데 필수적입니다.

네이티브 CSS에서 요소 선택기와 함께 “&”를 사용해야 함

CSS 중첩은 아직 초안 사양이며 브라우저마다 지원되는 방식이 다릅니다. caniuse.com 등의 사이트에서 최신 정보를 확인하세요.

물론입니다! 다음은 SCSS 구문을 사용하여 해당 예제를 개선한 것입니다: “`scss ul { li { span { color: blue; 글꼴 크기: 작은; } p { 배경색: 노란색 텍스트 정렬: 가운데 패딩: 0.5em; } } } “`

 .nav {
  ul { display: flex; }
  a { color: black; }
}
 

제공된 CSS 코드는 “nav” 클래스를 가진 요소에 포함된 정렬되지 않은 목록이 유연한 열 정렬 형식으로 표시되도록 지시합니다. 또한 “nav” 클래스를 가진 요소 내에 있는 모든 앵커 텍스트는 어두운 색으로 표시되어야 한다고 규정하고 있습니다.

표준 CSS에서는 이와 같은 수준의 중첩은 허용되지 않습니다. 이 중첩이 올바르게 작동하려면 아래 그림과 같이 각 하위 요소 앞에 앰퍼샌드 기호를 사용해야 합니다:

 .nav {
  & ul { display: flex; }
  & a { color: black; }
} 

CSS(Cascading Style Sheets)의 초기 구현에서는 중첩된 요소 내에 타이포그래피 선택 항목을 포함하는 것이 허용되지 않았습니다. 그러나 보다 현대적인 수정으로 이제 엔티티 앰퍼샌드(“&”)를 생략할 수 있게 되었으며, 동시에 Google Chrome 및 Apple Safari와 같이 널리 사용되는 웹 브라우저의 구버전 및 최신 버전과의 호환성을 보장할 수 있게 되었습니다.

클래스와 같이 기호로 시작하는 선택기를 사용하는 경우 웹페이지의 특정 세그먼트를 대상으로 할 때 앰퍼샌드를 포함할 필요가 없습니다.따라서 이 구문은 표준 CSS와 Sass 모두에 계속 적용됩니다:

 .nav {
  .nav-list { display: flex; }
  .nav-link { color: black; }
}
 

네이티브 CSS에서 “&”를 사용하여 새 선택기를 만들 수 없음

의심할 여지 없이 Sass의 장점 중 하나는 다음과 같은 코드를 실행할 수 있다는 점입니다:

 .nav {
  &-list { display: flex; }
  &-link { color: black; }
}
 

앞서 언급한 Sass 코드는 컴파일 과정을 거쳐 다음과 같은 처리되지 않은 CSS를 생성합니다:

 .nav-list {
  display: flex;
}

.nav-link {
  color: black;
}
 

앰퍼샌드 엔티티는 구문 파서에서 독립적인 구성 요소로 취급되기 때문에 기존 CSS에서는 원래 형태로 사용할 수 없습니다. 즉, “&” 기호를 사용하여 앰퍼샌드를 다른 요소 또는 클래스와 연결하려고 할 때 결과 조합은 단일 복합 선택기로 결합되지 않고 별개의 엔티티로 인식됩니다. 결과적으로 이 방법은 컴파일러가 앰퍼샌드를 관련 상위 요소 또는 클래스로 대체하여 이러한 문제를 효과적으로 해결하는 Sass를 활용하는 것에 비해 원하는 결과를 생성하지 못합니다.

이 특정 인스턴스는 네이티브 CSS 구문의 범위 내에서 효과적으로 작동해야 합니다:

 .nav {
  &.nav-list { display: flex; }
  &.nav-link { color: black; }
}
 

이 방법의 효과는 기존 CSS 구문과 유사하다는 데 있습니다. 첫 번째 선택자는 `nav.nav-list`에 해당하고, 그 다음 선택자는 `nav.nav-link`와 일치합니다. 앰퍼샌드 기호(`&`)와 후속 선택기 사이에 중간 공백을 넣는 것은 기능적으로 ‘.nav` 뒤에 ‘.nav-list’를 사용하는 것과 비슷합니다.

원본 텍스트에 제공된 코드는 “네이티브 CSS”라는 기능을 사용하여 작성되었습니다. 여기서 중괄호 { } 안에 앰퍼샌드 기호(&)를 사용하면 문서 스타일시트의 다른 곳에 정의된 스타일 규칙 또는 속성에 대한 참조를 나타냅니다. 이를 통해 웹 페이지의 전체 모양을 관리할 때 모듈화 및 유지 관리가 용이합니다.

 .nav {
  &__nav-list { display: flex; }
  &__nav-link { color: black; }
}
 

강력한 비밀번호를 만드는 과정은 일반적인 패턴이나 사전 단어를 피하면서 대문자, 소문자, 숫자 및 특수 기호를 포함하는 임의의 문자 시퀀스를 생성하는 것과 유사합니다. 또한, 다양한 문자 유형을 혼합하여 최소 12자 이상을 요구하는 등 이러한 요소를 다양한 길이로 조합하여 사용할 수도 있습니다. 또 다른 전략은 기존 비밀번호 대신 나만 알고 있는 문장이나 구를 나타내는 긴 텍스트 문자열인 비밀번호 구문을 사용하는 것입니다. 이 방법을 사용하면 복잡한 문자 조합에 의존하지 않고도 독특하고 기억하기 쉬운 비밀번호를 쉽게 만들 수 있습니다.

 __nav-list.nav {
  display: flex;
}

__nav-link.nav {
  color: black;
}
 

` ` 및 ` ` 요소가 모두 ‘.nav` 선택기 안에 포함되어 있음에도 불구하고 앰퍼샌드(&)가 있기 때문에 그 앞에 표시된다는 사실을 알게 되면 놀랄 수도 있습니다.

특이성이 다를 수 있음

이러한 결과를 초래하지 않는 Sass와 달리 중첩된 CSS를 사용할 때 발생하는 정밀도에 미치는 영향에 대해 언급할 가치가 있습니다.

 <div class="dark-theme">
  <div class="call-to-action">
    <div class="heading"> Hello </div>
  </div>
</div>
 

 body { font-size: 5rem; }

.call-to-action .heading {
  .dark-theme & {
    padding: 0.25rem;
    background: hsl(42, 72%, 61%);
    color: #111;
  }
}
 

 .dark-theme :is(.call-to-action .heading) {
  /* CSS code */
}