이 내용으로 scss difine이 있습니다.
.dialog {
...
.dialog-content {
...
.dialog-content-header {
background-color: red;
}
}
}
그러면 CSS가 생성됩니다.
...
.dialog .dialog-content .dialog-content-header {
background-color: red;
}
이에 도달하는 방법을 찾아야합니다.
...
.dialog.dialog-with-train .dialog-content .dialog-content-header {
background-color: blue;
}
추가 .dialog-with-train 선택기는 .dialog-content-header 컨텍스트에서 어떻게 든 추가해야합니다. 이런 일이 가능할까요?
.dialog {
...
.dialog-content {
...
.dialog-content-header {
background-color: red;
@at-root getFirstItem(&).dialog-with-train getItems(&, 2, ?length?) {
background-color: blue;
}
}
}
}
.dialog에서 .dialog-content-header 로의 경로는 제 경우에는 상당히 복잡하며 기존 코드를 수정하고 반복하지 않고 깔끔한 방식으로 변경하고 싶습니다.
어떤 충고?
EDIT1 : https://sass-lang.com/documentation/modules/selector를 보면 선택기 경로를 필수 구성으로 구문 분석 + 구성하는 방법이 있습니까?
EDIT2 : .NET을 사용하여 선택기의 문자열 빼기로 몇 가지 해결책을 찾았습니다 @use "sass:string";. 내 대답을 참조하십시오.
더 좋거나 더 깨끗한 솔루션이 있다면 알고 싶습니다.
이것이 작동하는 것 같습니다.
@use "sass:string";
.dialog {
$dialog: &;
...
.dialog-content {
...
.dialog-content-header {
background-color: red;
@at-root #{$dialog}.dialog-with-train #{str-slice("#{&}", str-length("#{$dialog}") + 2)} {
color: blue;
}
}
}
}
어떻게 작동합니까?
$dialog맥락에서 정의@at-root 루트 컨텍스트에서 선택자를 생성합니다.#{$dialog}.dialog-with-train 필수 클래스별로 첫 번째 선택자를 확장합니다.#{str-slice("#{&}", str-length("#{$dialog}") + 2)}현재 선택기 및 $dialog선택기의 빼기를 제공합니다."빼기"를 어떻게 수행했는지 자세히 설명합니다.
str-length("#{$dialog}")$dialog선택 자의 문자열 길이 계산"#{&}" 현재 컨텍스트 선택기를 문자열로 가져옵니다.#{str-slice("#{&}", str-length("#{$dialog}") + 2)}현재 선택기에서 하위 문자열을 가져옵니다. 뺄셈의 첫 번째 문자는 $dialog선택기가 끝난 후 2 자부터 시작 됩니다.이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다