SASS 앰퍼샌드 자습서

앰퍼샌드& 연산자는 SASS에서 중첩할 때 자주 사용되며 매우 유용한 기능입니다.

특히 BEM methodology 으로 스타일시트를 코딩하거나 클래스 이름에 체계적인 명명 규칙을 사용하는 경우 시간을 크게 절약할 수 있습니다.

다음 HTML을 참조하십시오.

<button class = "btn btn--red"> Click me! </button>

일반적인 스타일은 다음과 같습니다.

.btn {
  display: inline-block;
  padding: 15px 32px;
}
.btn--red {
  background-color: #ff0000; // Red
}
.btn:hover {
  background-color: #fff; // White
}

& 연산자를 사용하면 훨씬 더 효율적일 수 있습니다.

.btn {
  display: inline-block;
  padding: 15px 32px;
  &--red {
    background-color: #ff0000; // Red
  }
  &:hover {
    background-color: #fff; // White
  }
}

이제 .btn 연산자로 표시되는 동일한 & 이름을 사용하는 하위 선택자를 중첩했습니다. 이름.

컴파일되면 & 연산자가 둘러싸는 선택자 이름으로 대체됩니다!

다음 포스팅에서는 제어 지시어에 대해 알아보도록 하겠습니다.

결론

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

🌎 연결하자

Portfolio

Hashnode

Medium

Github

Codepen