SASS 상속 자습서

Sass의 또 다른 훌륭한 기능은 상속입니다. @extend 지시문을 사용하여 이를 구현합니다.

상속은 여러 클래스가 공통 속성 집합을 서로 공유할 수 있도록 하는 SASS의 기능입니다.

예시

버튼 스타일 지정을 위한 몇 가지 일반적인 CSS 코드:

.button {
  background-color: #0000FF; // Blue
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}

우리 웹 사이트에 비슷한 방식으로 스타일이 지정된 여러 버튼이 있다면 상속하기에 좋은 사례가 될 것입니다!

다음과 같이 상속을 통해 보조 버튼을 구현합니다.

.button-secondary {
  @extend .button;
  background-color: #4CAF50; // Green
} 

우리의 .button-secondary 클래스는 녹색으로 설정하기로 결정한 .button class를 제외하고 background-color로 설정된 모든 속성과 값을 사용합니다.

상속을 사용하면 코드를 깔끔하고 깨끗하게 유지하고 재사용 가능한 구성 요소를 구성하는 데 집중할 수 있습니다.

이 시리즈의 다음 부분에서는 & 연산자를 살펴보겠습니다.

결론

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

🌎 연결하자

Portfolio

Hashnode

Medium

Github

Codepen