[SCSS] import & extend

 

import (불러오기)

변수나 mixin을 저장한 파일들을 다른 SCSS 파일에서 사용하거나, 큰 프로젝트에서는 여러 파일로 스타일을 나누고, 다른 파일에서 스타일을 불러서 사용하는 경우가 많다.

 

SCSS에서는 CSS에서와 달리 여러 SCSS 파일을 불러와도 최종적으로 하나의 CSS로 컴파일해준다.

 

@import "파일명.scss";

@import "파일명";

SCSS 파일을 import할 때, .scss 확장자를 써도 되고 쓰지 않아도 된다.

 

 

extend (상속)

SCSS에서 특정 선택자를 상속할 때 @extend를 사용하여 상속 가능하다.

 

.top-block{
  margin-top: 10px;
  border: 2px solid black;
}

.content-block{
  @extend .top-block;
  background: yellow;
}

.img-block{
  @extend .top-block;
  background: red;
}

위와 같이 SCSS 코드에서 @extend를 사용했다면, .contend-block과 .img-block은 .top-block의 스타일을 상속받아 같은margin-top과 border의 스타일이 적용되고 background 색상만 다를 것이다.

 

 

 

placeholder

앞선 코드에서 확장시킬 기본 스타일인 .top-block은 컴파일이 된다.

만약 extend만을 위해 스타일을 선언하고 싶으면 % 기호를 사용하면 된다.

%를 사용하면 상속은 가능하지만, 컴파일은 되지 않는 것이다.

 

%top{
  margin-top: 10px;
  border: 2px solid black;
}

.content-block{
  @extend %top;
  background: yellow;
}

.img-block{
  @extend %top;
  background: red;
}

SCSS

 

.content-block, .img-block{
  margin-top: 10px;
  border: 2px solid black;
}

.content-block{
  background: yellow;
}

.img-block{
  background: red;
}

CSS