[Sass] @mixin, @extend의 차이

설명

Sass는 CSS를 보완하기 위해 생긴 언어입니다. 기본적인 코드 작성 방법은 CSS와 동일하지만, 모든 내용들을 하나하나 기술해야 했던 CSS와는 달리, Sass에서는 DRY (Don't Repeat Yourself)의 원칙으로 변수를 설정하는 등의 편의성을 더해, 코드를 유지 보수하는 데 더 큰 도움을 받을 수 있습니다.

 

변수 설정

변수 설정 방법은 다음과 같습니다.

 

$변수명 : 값;

/* 예시 */
$myColor : #000000;
body {color : $myColor}

 

더 확장된 기능

1. @mixin

@mixin을 통해 여러 줄의 '속성 + 값'을 정의하고, 이를 재사용할 수 있습니다. 또한 @include를 통해 이를 불러옵니다.

 

@mixin 변수명 {
  property : value;
  property : value;
}

/* 예시 */

/* mixin으로 변수 선언 */
@mixin important-font {
  color : red;
  font-size : 24px;
}

/* include로 변수 삽입 */
p {
  @include important-font;
}

 

2.@extend

@extend 또한, @mixin과 같이 여러 줄의 '속성 + 값'을 재사용하는 데 사용됩니다. 차이점은 @mixin에서는 사전에 변수를 통해 미리 규칙을 세워 코드를 재사용했다면, @extend를 통해서는 이미 작성된 '속성 + 값'을 불러오는 데 사용합니다.

 

@extend 선택자

/* 예시 */
.important-text {
  color:red;
  font-size:24px;
}
.another-text {
  @extend .important-text
  font-weight: bold;
}

/* 예시의 결과 */
.another-text {
  color: red;
  font-size:24px;
  font-weight: bold;
}