SASS - 5장 상속(Extend)

상속(Extend)

1. Extend

Extend는 연관 있는 요소들끼리 스타일 코드가 중복된 경우에 사용됩니다. 이미 스타일이 작성된 선택자의 클래스를 extend하거나 , %를 사용해서 따로 스타일을 정의한 후 extend하여 원하는 선택자에게 스타일을 적용해 줄 수 있습니다.

예를 들어 aside안에 존재하는 리스트에 요소들을 클릭할 때마다 보여주는 드롭메뉴와 프로필을 클릭했을 때, 프로필과 관련된 메뉴를 보여주는 드롭메뉴가 있다고 합시다. 안에 들어있는 내용들은 다르지만 드롭메뉴라는 연관성을 가진 경우입니다.

Sass를 사용하지 않고 스타일을 적용한다면 새로운 클래스를 정해서 중복되는 스타일을 넣어주거나, 각각 동일한 코드를 적어서 요소에 스타일을 적용할 것 입니다. 하지만 Sass의 Extend를 사용하면 중복된 코드를 @extend를 사용하여 더 단순한 코드를 작성할 수 있습니다.

• mixin는 (관계 없는) 선택자에서 조금 다른 스타일을 적용할 때 사용
• extend는 관계 있는 선택자들의 동일한 소스코드 적용시 사용

💡 아래 컨벤션처럼 기능이 중복되어 mixin을 사용하고 extend를 사용하지 않는 기업도 많습니다.

참고 : HTML/CSS/Sass

2. Extend 하는 2가지 방법

2-1. class이름 가져오기

기존에 작성한 클래스 내에 코드를 가져올 수 있습니다. @extend 에 클래스 명을 함께 적으면, 클래스에 있는 코드 전체가 extend 됩니다.

// Scss
.profile-user {
    background-image: url("../assets/user.jpg");
    background-size: cover;
    background-position : 50% 50%;
    border-radius: 50%;
    width : 50px;
    height : 50px;
}

.comment-user {
    @extend .profile-user;
    border-width: 10px;
}

/*CSS*/
.profile-user,
.comment-user {
  background-image: url("../assets/user.jpg");
  background-size: cover;
	background-position : 50% 50%;
  border-radius: 50%;
	width : 50px;
	height : 50px;
}

.comment-user {
  border-width: 10px;
}

.profile-user 클래스를 가진 로그인 프로필 user 이미지 박스가 .comment-user가 댓글을 작성할 때 user임을 나타내주는 이미지 박스와 중복되는 경우입니다. .profile-user 코드 전체를 .comment-user 에게 extend 해줍니다.

⚠️ class명을 extend 하는 경우 다중 선택자 클래스를 사용할 수 없습니다. (ex. .box .container , .box1 + .box2)

2-2. %placeholder

% 로 선택자를 만듭니다. @extend를 사용해서 앞서 %placeholder 스타일 블럭을 불러오면 됩니다.

그리고 %선택자는 CSS로 컴파일되지 않습니다.

// Scss
%base-button {
  width: 133px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 10px;
}

.follow-button {
  @extend %base-button;
  background-color: #ffffff;
  color: #ff375f;
  border: 3px solid #ff375f;
}

.message-button {
  @extend %base-button;
  background-color: #ff375f;
  color: white;
}

/*CSS*/
.follow-button,
.message-button {
  width: 133px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 10px;
}

.follow-button {
  background-color: #ffffff;
  color: #ff375f;
  border: 3px solid #ff375f;
}

.message-button {
  background-color: #ff375f;
  color: white;
}

⚠️ Extend를 사용할 때, 클래스보다 %를 사용하기를 권장합니다.

3. 예시 : 모달

웹페이지 안에서 생성되는 여러가지 모달에 대한 코드입니다.

%를 사용하여 스타일 블럭을 만들고, 각각의 모달에 스타일을 적용해줍니다.

// Scss
%modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}

.login-modal {
  @extend %modal;
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}

.event-modal {
  @extend %modal;
  width: 340px;
  height: 160px;
  padding: 18px;
}

/*CSS*/
.login-modal,
.event-modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}

.login-modal {
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}

.event-modal {
  width: 340px;
  height: 160px;
  padding: 18px;
}

4. 예시 : 포토 링크 박스

두 개의 div는 포스팅 링크로 이동하는 기능은 같지만, 조금 다른 형태의 스타일이 적용되어 있습니다. 공통된 코드를 box-frame으로 묶어주었습니다.

// Scss
%box-frame {
  border: 2px solid #bb6bd9;
  border-radius: 15px;
  width: 574px;
  height: 310px;
}

.phoster-span {
  @extend %box-frame;
  span {
    display: inline-block;
    border-top: 2px solid #bb6bd9;
    padding: 16px 0 17px;
    text-align: center;
  }
}

.phoster-none {
  @extend %box-frame;
}

/*CSS*/
.phoster-span,
.phoster-none {
  border: 2px solid #bb6bd9;
  border-radius: 15px;
  width: 574px;
  height: 310px;
}

.phoster-span span {
  display: inline-block;
  border-top: 2px solid #bb6bd9;
  padding: 16px 0 17px;
  text-align: center;
}

출처 : 인프런 - [초급] 40분만에 훑어보는 Sass