CSS --var: 상속(--var) + 2; 그래 넌 할수있어! JS없이!

inherit(--var) 또는 parent(--var)는 CSS 작업 그룹에서 논의되었으며 an open issue in the csswg-drafts repo으로 추적되는 오랫동안 원하는 CSS 기능입니다. 그들의 논의는 직계 > 후손만 직계 부모로부터 가치를 가져오도록 허용하는 쪽으로 기울고 있는 것 같습니다. 이는 여전히 매우 유용합니다.

오늘 시연할 것은 직계 부모를 넘어 작동하지만 한 가지 작은 주의 사항이 있습니다. 소스 및 수신자 요소에는 전달을 용이하게 하기 위해 공통 선택기(예: 둘 다 div 또는 둘 다 .whatever )가 필요합니다. 따라서 그들의 논의가 지금 있는 곳에서 이전 버전과 호환되는 변환이 없습니다...

쉬운 방법 - 믹스인 사용

재사용 가능한 Less(또는 Sass) 믹스인으로 시작하여 CSS를 생성합니다.



참고: 아니오:has() 또는 여기에 컨테이너 쿼리가 있습니다. 이것은 작성 시점에 89% of global users에 대해 작동합니다. 제한 요소는 :where() 선택자와 레벨 4:not() 선택자입니다. 🎉

루트 .hue 요소에서 --hue는 0deg의 폴백을 사용하기 때문에 inherit(--hue, 0deg)로 평가됩니다. 거기에서 모든 .hue는 이전 값을 상속하고 여기에 30deg를 추가합니다.

작동 방식 - 선택자

이 아이디어의 핵심은 .sel:not(.sel .sel)가 다른 .sel 요소에 중첩되지 않은 .sel만 선택한다는 것입니다.

그런 다음 .sel .sel:not(.sel .sel .sel)는 정확히 한 조상.sel의 후손인 .sel만 선택하지만 그 이상은 선택하지 않습니다.

최대 수심까지 하세요...
그런 다음 이 트릭의 다음 부분을 설정하기 위해 두 그룹으로 나눕니다.
홀수와 짝수.

마지막으로 :where()로 감싸서 선택기의 특이성을 0으로 떨어뜨려 CSS에서 작성하는 다른 항목이 특이성 전쟁 없이 이를 무시하도록 합니다. (대부분의 CSS 라이브러리에 있는 대부분의 선택자는 미래에 :where()로 래핑되므로 개발자 사용자가 선택자와 싸우는 것에 대해 걱정할 필요가 없습니다.)

컴파일된 코드펜에서 최대 중첩이 12인 .hue 선택기는 다음과 같이 표시됩니다.

:where(
.hue:not(.hue .hue),
.hue .hue .hue:not(.hue .hue .hue .hue),
.hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue),
.hue .hue .hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue .hue .hue),
.hue .hue .hue .hue .hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue .hue .hue .hue .hue),
.hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue)
) {
  ... // odd-nesting code
}
:where(
.hue .hue:not(.hue .hue .hue),
.hue .hue .hue .hue:not(.hue .hue .hue .hue .hue),
.hue .hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue .hue),
.hue .hue .hue .hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue .hue .hue .hue),
.hue .hue .hue .hue .hue .hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue),
.hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue:not(.hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue .hue)
) {
  ... // even-nesting code
}

작동 방식 - 홀수/짝수 var() 체인

우리가 원래 쓴 것은

--hue: calc(inherit(--hue, 0deg) + 30deg)

그런 다음 홀수 중첩 선택기 내에서 바닐라 CSS는 다음과 같이 됩니다.

--hue: calc(var(--io1_hue, 0deg) + 30deg);
--io2_hue: var(--hue);

이것이 하는 일은 짝수 중첩에만 존재하는 (하지만 CSS var이기 때문에 자동으로 상속됨) var를 찾는 것입니다. 따라서 루트 --io1_hue 에서 .hue 를 덮어쓰지 않은 경우 --hue 폴백을 사용합니다.

그런 다음 0deg var를 --hue로 만들고 설정하여 --io2_hue의 홀수 중첩 내보내기를 만듭니다.

짝수 중첩 선택기 내에서 바닐라 CSS는 다음과 같이 됩니다.

--hue: calc(var(--io2_hue, 0deg) + 30deg);
--io1_hue: var(--hue);

지금 --hue가 inherit(--hue가 되어 홀수 중첩 깊이에서 내보내기를 찾는다는 점을 제외하고는 완전히 동일한 작업을 수행합니다.

마지막으로, 사용할 다음 홀수 중첩에 대한 var(--io2_hue 내보내기를 설정하면 체인이 완료됩니다.

\
/
\
/
\
/
\
:)

그게 다야! 재미있게 보내세요!

그리고 우리는 --io1_hue 추상화가 의미가 있고 지금 작성해야 하는 전부이기 때문에 세부 사항에 대해 생각할 필요가 없습니다! <3

이것을 즐기거나 유용하거나 재미있는 데모를 만들면 트윗 @ 나에게 해주세요!

결합!

문서: https://propjockey.github.io/css-inherit-fn/
라이브 데모 플레이그라운드: https://propjockey.github.io/css-inherit-fn/#live-examples
패키지: https://www.npmjs.com/package/css-inherit-fn
레포: https://github.com/propjockey/css-inherit-fn
트위터: