SASS에서 중첩이 작동하는 방식

HTML 파일의 구조를 관찰하면 매우 명확한 계층 구조가 있음을 알 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>


보시다시피 HTML은 읽기 쉬운 구조를 가지고 있습니다.

반면 CSS에는 이러한 시각적 구조가 없습니다. 그렇기 때문에 매우 빠르게 무질서해지는 경향이 있습니다.

Sass nesting를 입력하십시오!

정의



중첩을 사용하면 상위 선택자 안에 하위 선택자를 중첩할 수 있습니다.

그 결과 코드가 훨씬 깨끗하고 덜 반복됩니다.

예시



다음 HTML을 사용하십시오.

<nav class="navbar">
  <ul>
    <li>Home</li>
    <li>Services</li>
    <li>Contact Us</li>
  </ul>
</nav>


일반 CSS를 사용하면 다음과 같이 작성할 수 있습니다.

.navbar {
  background-color: red;
  padding: 1rem;
}
.navbar ul {
  list-style: none;
}
.navbar li {
  text-align: center;
  margin: 1rem;
}


여기에는 많은 반복이 있습니다. navbar 의 자식 스타일을 지정할 때마다 클래스 이름을 반복해야 합니다.

Sass 중첩을 사용하면 훨씬 깔끔한 코드를 작성할 수 있습니다.

이렇게:

.navbar {
  background-color: red;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
  }
}


들여쓰기를 사용하면 이제 ulli 선택기가 navbar 선택기 안에 깔끔하게 중첩된 것을 볼 수 있습니다.

우리는 훨씬 덜 반복적인 구문을 사용하여 읽기가 훨씬 쉽습니다!

결론



이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here

🌎 연결하자


  • Portfolio
  • Hashnode
  • Medium
  • Github
  • Codepen
  • 좋은 웹페이지 즐겨찾기