SCSS 디렉티브 조건분기 반복 믹스인

🗓2020년 02월 27일 ∙ 🖊TutorialPost ∙ ⏳2분

SCSS 디렉티브는 @ 으로 시작하는 명령문으로, 코드 내부의 분기, 반복, 믹스인 등의 제어에 사용되는 강력한 기능입니다.

조건분기 - @if…@else if…@else

// 변수 $type의 값을 비교해 color 속성을 변경
$type: spring;

div {
  @if $type == spring {
    color: #0f0;
  } @else if $type == fall {
    color: #f30;
  } @else {
    color: #0ff;
  }
}

리스트 반복 - @each

// 리스트의 각 항목을 $type에 설정해 이미지 경로로 적용
@each $type in fine, cloudy, rainy {
  .item-#{$type} { background-image: url('/images/#{$type}.gif'); }
}

조건 반복 - @while

$i: 1;

@while $i < 4 {
  .section#{$i} { background-color: lighten(blue, 15% * $i); }
  $i: $i + 1;
}

결과

.section1 {
  background-color: #4d4dff;
}

.section2 {
  background-color: #9999ff;
}

.section3 {
  background-color: #e6e6ff;
}

스타일 정의 재사용 - @mixin 및 @include

@mixin을 사용하면 공통으로 사용되는 스타일을 정의할 수 있습니다.

믹스인을 사용해 정의한 스타일은 @include로 원하는 장소에 적용할 수 있습니다.

// box 믹스인 정의
@mixin box {
  border: solid 1px aliceblue;
  font-size: 16px;
}

// box 믹스인 사용
.card {
  @include box;
  text-align: center;
}

믹스인을 정의할 때, 프로그래밍 언어의 함수와 비슷하게 매개변수를 정의할 수 있습니다. 이렇게 하면 믹스인을 사용할 때 실제 값을 넣어주어 확장성 있는 믹스인을 만들 수 있습니다.

또한 파라미터 내부에서 $backcolor: #00f 와 같이 파라미터 기본값을 정의할 수도 있습니다.

// 매개변수를 가지는 mixin
@mixin common-border($color, $backcolor: #00f) {
  border: solid 1px #{$color};
  background-color: #{$backcolor};
}
.top {
  @include common-border(#300, #ffc);
  margin: 0px;
}

스타일 정의 상속 - @extend

이미 정의된 스타일을 상속받아 새로운 스타일을 정의합니다.

// main-content 스타일을 상속해서 sub-content 스타일을 생성
.main-content {
  color: #300;
  background-color: #ffc;
}

.sub-content {
  @extend .main-content;
  border: solid 2px #003;
}

결과

/* CSS */
.main-content, .sub-content {
  color: #300;
  background-color: #ffc;
}

.sub-content {
  border: solid 2px #003;
}

외부 스타일시트 추가 - @import

@import는 다른 scss 파일을 추가할 때 사용합니다. @import는 특정 파일에 프로젝트에 전역적으로 사용될 변수와 믹스인을 정의해 놓고 모듈 형식으로 해당 파일을 불러와 사용하는 방식으로 많이 사용됩니다.

// import 시 .scss 확장자는 생략할 수 있습니다.
@import 'common';
@import 'common.scss';
SHARE