SCSS에서 계층을 관리하는 매우 쉬운 방법

0, 1, 999, 99999, 9999999를 z-index 값으로 사용하는 웹사이트를 본 적이 있다면 레이어가 임의로 배열되어 해당 웹사이트를 미래.

레이어를 관리하는 방법은 SCSS 자리 표시자를 통하는 것입니다. 처리할 계층화된 구성 요소가 몇 개 있다고 가정하고 클래스 이름은 같지만 접두어가 %layer-인 자리 표시자를 확장합니다.

.nav{
// some properties
    @extend %layer-nav;
}
.dimmer{
    // some properties
    @extend %layer-dimmer;
}
.modal{
    // some properties
    @extend %layer-modal;
}

그런 다음 _layers.scss라는 별도의 SCSS 부분에서 이러한 자리 표시자를 각각 한 줄짜리 방식으로 배치하여 레이어와 해당 값을 쉽게 훑어볼 수 있습니다.

%layer-nav  { z-index: 10; }
%layer-dimmer   { z-index: 11; }
%layer-modal    { z-index: 12; }

또한 컴파일러가 나중에 레이어 부분 파일에서 쉽게 인코딩하는 데 사용하는 몇 가지 오류를 표시하기 때문에 선언하기 전에 먼저 다른 구성 요소에서 자리 표시자를 확장해도 괜찮습니다.

그게 전부입니다. Z-인덱스 값은 자리 표시자로 구현되기 때문에 값을 조정하기 위해 구성 요소를 지속적으로 다시 방문할 필요가 없습니다. 또한 어떤 것이 다른 것에 어떻게 영향을 미치는지 기록하기 위해 많은 주석을 달 필요가 없습니다. 그리고 가장 중요한 것은 상자가 맨 위에 나타나도록 하기 위해 수십, 수백(또는 수천) 단위를 건너뛸 필요가 없다는 것입니다!

이 @extend 구현에서 명명 규칙 때문에 여러 구성 요소에서 동일한 자리 표시자를 공유하는 것이 최선의 아이디어가 아닐 수도 있다는 점도 주목할 가치가 있습니다.[편집] 이 경우에는 변수를 사용하는 것이 좋습니다. 아래 댓글.

저처럼 여러분도 이 정보를 유용하게 사용하시기 바랍니다. 여러분의 생각을 알려주시거나 더 쉬운 방법이 있다면 자유롭게 공유해 주세요. 꼭 확인하겠습니다.