PostCSS RTL 플러그인이 SCS 중첩 선택기를 처리 할 때`/*rtl : inver*/`주석이 실패하는 이유는 무엇입니까?

Postcss RTL 플러그인 및 SCSS 중첩 선택기 충돌 및 솔루션

SCSS 스타일을 처리하기 위해 PostCSS RTL 플러그인을 사용하는 경우 /*rtl:ignore*/ 댓글이 중첩 된 선택기에서 실패합니다. 이 기사는이 문제를 분석하고 솔루션을 제공합니다.

문제 : 개발자는 SCSS 파일에서 중첩 된 선택기를 사용하고 /*rtl:ignore*/ 댓글을 추가하지만 주석은 유효하지 않습니다. 예를 들어:

 / * RTL : 무시 */
.Header_btn {
  .Action-Account {
    배경 : URL (../ img/iconsx.png) No -Repeat -691px -291px;
  }
}

RTL 환경에서 .action-account 선택기의 배경 이미지 위치는 여전히 변환됩니다. 그러나 동일한 코드가 순수한 CSS 파일에서 잘 작동합니다 /*rtl:ignore*/

원인 : PostCSS RTL 플러그인이 SCSS 파일을 처리 할 때 /*rtl:ignore*/ 주석 식별에 중첩 된 선택기에 제한이 있습니다. 이것은 SCS 중첩 구조 에서이 주석의 유효성이 영향을 받음을 의미합니다.

솔루션 : 중첩 된 SCSS 코드를 비 네스트 CSS 코드로 변환합니다. 중첩 구조를 확장함으로써 /*rtl:ignore*/ 주석은 대상 선택기에서 직접 작용하여 PostCSS RTL 플러그인이 변환을 올바르게 인식하고 무시하도록합니다. 예를 들어 위의 SCSS 코드를 다음으로 변환하십시오.

 / * RTL : 무시 */
.Header_btn .Action-Account {
  배경 : URL (../ img/iconsx.png) No -Repeat -691px -291px;
}

이 방법을 통해 PostCSS RTL 플러그인은 /*rtl:ignore*/ 주석은 SCS 중첩 선택기를 다룰 때 유효하지 않아 스타일의 올바른 처리를 보장합니다.

위 내용은 PostCSS RTL 플러그인이 SCS 중첩 선택기를 처리 할 때`/*rtl : inver*/`주석이 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!