(SCSS) 후속 요소의 상태에 따라 선행 요소의 속성 변경

debugcn 에 게시 Dev

표류 단계

HTML 및 SCSS에 다음 설정이 있습니다.

h1 {
  margin-bottom: 24px;
  + p {
    margin-top: 0;
  }
}
p {
  margin-bottom: 24px;
}
<h1>Main title</h1>
<p>Sub-title goes there here</p>

내가 달성하기 위해 노력하고있어 내가 원하는입니다 <h1>이야 ' margin-bottom에서 변화 24p에 X 0px있을 때 <p>태그가 뒤에 있지만 존재하지 않는 경우 <p>태그 다음 margin-bottom에이 <h1>유지됩니다 24px.

나는 &연산자를 사용해 보았지만 머리를 둘러 쌀 수없는 것 같습니다.

h1 {
  margin-bottom: 24px;
  & + {
    margin-bottom: 0;
  }
  + p {
    margin-top: 0;
  }
}
p {
  margin-bottom: 24px;
}

내가 뭘해야한다고 생각하니? @if이 특정한 경우에 지시문 을 사용해야 합니까?

숨겨진 홉스

CSS가 작동하는 방식으로 인해 불가능합니다.

달성하고자하는 것은 궁극적으로 불가능합니다. SASS는 한 방향으로 만 통과되는 CSS로 컴파일됩니다. 즉, 다른 요소가 선행하는 요소를 대상으로 지정할 수 있지만 다른 요소가 후속하는 요소는 선택할 수 없습니다.

당신은 무엇을 할 수 있나요?

이 제한이 주어지면 결과를 얻는 가장 적합한 방법은 논리를 변경 하여 태그 에서 로 대체 되도록하는 것 margin-bottom입니다 .h1margin-topp

SASS

h1 {
  margin-bottom: 0;
  + p {
    margin-top: 0;
  }
}
p {
  margin-top: 24px;
}

컴파일 된 예

h1 {
  margin-bottom: 0;
}
h1 + p {
  margin-top: 0;
}
p {
  margin-top: 24px;
}

<h1>Main title</h1>
<p>Sub-title goes there here</p>

당신이 이동할 수없는 경우 margin로부터를 h1받는 p태그는 부정적인를 사용하는 것이 허용 될 margin-top온 p을 상쇄하기 위해 margin-bottom온 h1.

SASS

h1 {
  margin-bottom: 24px;
  + p {
    margin-top: -24px;
  }
}
p {
  margin-top: 24px;
}

컴파일 된 예

h1 {
  margin-bottom: 24px;
}
h1 + p {
  margin-top: -24px;
}
p {
  margin-top: 24px;
}

<h1>Main title</h1>
<p>Sub-title goes there here</p>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-16

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사