SASS에서 중첩이 작동하는 방식
<!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;
}
}
들여쓰기를 사용하면 이제
ul 및 li 선택기가 navbar 선택기 안에 깔끔하게 중첩된 것을 볼 수 있습니다.우리는 훨씬 덜 반복적인 구문을 사용하여 읽기가 훨씬 쉽습니다!
결론
이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here🌎 연결하자
Reference
이 문제에 관하여(SASS에서 중첩이 작동하는 방식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rembertdesigns/how-does-nesting-work-in-sass-3fd4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
