Sass 기본 개념 정리2

4. @import

기능에 따라 코드를 파일로 분리하는 것은 재사용 및 유지보수에 유리하다. CSS 파일도 예외는 아니다. Sass는 @import를 통해 여러 CSS 파일을 import 할 수 있다. 기존의 CSS @import보다 편리하다.

@import "style1.scss";

// 확장자는 생략할 수 있다. 
@import "style1";

// 다수의 파일을 한 번에 import할 수 있다. 
@import "style2", "style3";

여러 개로 분할된 파일을 partial이라 하는데, partial된 Sass 파일명의 앞에는 언더스코어(_)를 붙여야 한다(예: _header.scss, _footer.scss). 언더스코어의 의미는 import는 실행하되 CSS로의 트랜스파일링은 하지 말라는 의미이다.

sass 파일의 import

partial된 Sass 파일명 선두에 언더스코어를 붙이지 않으면 에러가 발생한다. (단, 최신 버전에서는 언더스코어를 붙이지 않아도 에러가 발생하지 않는다)

5. @extend

기존 스타일을 상속하려면 @extend를 사용할 수 있다. 상속되는 속성은 그대로 상속받고 다른 속성만 별도로 선언한다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.roundBox {
  @extend .box;

  border-radius: 50%;
  border: 1px solid black;
}

.box, .roundBox {
  width: 100px;
  height: 100px;
  background-color: red;
}

.roundBox {
  border-radius: 50%;
  border: 1px solid black;
}

단, @extend는 트랜스파일링 후 예상하지 못한 부작용이 발생할 수 있다. 그러므로, @extend 보다는 후술할 Mixin을 사용하는 것이 좋다.

6. Mixin

Mixin은 사용 빈도가 높은 마크업을 미리 정의한 뒤, 필요한 때에 include하여 사용하는 방법이다. @mixin을 선언한 뒤, @include로 불러들이면 된다.

참고자료

https://poiemaweb.com