SCSS | 모듈화와 상속

모든 스타일들을 하나의 SCSS파일안에 담을 필요는 없습니다.
연관되어 있는 스타일들을 여러 SCSS파일로 분할하여 사용할 수 있습니다.

분리할 스타일들을 별도의 SCSS파일로 만들고, @import키워드를 사용하여 스타일을 불러올 수 있습니다.
SCSS파일끼리는 확장자를 붙이거나 생략할 수 있습니다.

/* variables.scss */
$item-bg: #fff;
$item-mg: 10px;

/* style.scss */
@import "variables";
.item {
  background-color: $item-bg;
  margin: $item-mg;
}

@minxin을 사용하면 SCSS파일 자체를 분할 하는것이 아닌 스타일을 함수처럼 만들어 재사용할 수 있습니다.
@include로 선언된 @minxin을 사용할 수 있고, 사용하기 전에 선언되어야 합니다.

@mixin btn {
  border-radius: 5px;
  background-color: #eee;
}
.button {
  @include btn;
  color: #000;
}

매개변수를 통해 사용자의 값을 받아올 수 있고, 내부에서 부모선택자를 사용할 수도 있습니다.
부모선택자를 사용하면 @minxin이 사용된 위치의 상위요소를 부모로 인식하게됩니다.
또한 하위요소의 스타일을 지정해 줄 수도 있고 여러번 재사용될 수도 있습니다.

@mixin btn($bg, $color) {
  background-color: $bg;
  span {
    color:$color;
  }
}

.primary-button {
  @include btn(royalblue, #fff);
}
.danger-button {
  @include btn(crimson, #fff);
}

@extend를 사용하면 스타일을 상속받을 수 있고, 부모요소로부터 스타일을 상속받은것과는 다릅니다.
여러 요소에서 같은 스타일을 필요로할 때 상속을 사용할 수 있습니다.

.base {
  background-color: royalblue;
}

.left {
  @extend .base;
}

.right {
  @extend .base;
}

위의 소스코드를 컴파일하게되면 아래와 같은 CSS로 변환됩니다.

.base, .right, .left {
  background-color: royalblue;
}

여기서 .base클래스는 실제로 사용되지 않지만 컴파일의 결과물에는 .base클래스가 있습니다.
만약 .base선택자를 출력되지 않게 하려면 클래스 선택자가 아닌 %를 사용하면됩니다.
@extend를 사용하는곳도 똑같이 %를 사용해야 됩니다.

%base {
  background-color: royalblue;
}

.left {
  @extend %base;
}

.right {
  @extend %base;
}