[SCSS]@mixin과 @function, @extend, @if

☘️ @mixin and @include

@mixin을 사용하면 재사용할 수 있는 스타일을 정의할 수 있으며, @include를 통해 사용할 수 있다.

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
@mixin horizontal-list {
  @include reset-list;
 
  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}
 
nav ul {
  @include horizontal-list;
}

그리고 아래와 같이 Arguments 인수를 받아 동작을 정의할 수 있다.
인수의 기본 값을 지정할 수도 있다.

@mixin flexbox($display: flex, $direction: row, $align: center) {
  display: $display;
  flex-direction: $direction;
  align-items: $align;
}
 
.page {
  @include flexbox(grid, column, center);
  grid-template-rows: 20px 1fr 20px;
 
}

☘️ @function

@function를 사용하여 복잡한 작업을 정의할 수 있다.

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}
 
.micro {
  width: sum(50px, 30px, 100px); // 180px
}
 
$widths: 50px, 30px, 100px;
.micro {
  width: min($widths...); // 30px
}

위와 같이 인수의 개수를 정확하게 파악하지 못할 때 마지막에 ...를 추가하면 자바스크립트의 Rest parameters와 같이 여러 개의 인수를 전달받을 수 있다.

@return

@return은 @function 내에서만 사용 가능하며 @function은 @return으로 끝내야 한다. return이 발생되면 즉시 함수를 종료하고 결과를 반환한다.

☘️ @extend

• @mixin의 파라미터 없는 방식이라고 생각하면 된다.
• class 안에 모듈처럼 작성해놓은 코드를 그대로 불러오는 방식이다.
• .btn 으로 모듈을 만들었으면 @extend .btn; 으로 불러오면 된다.
• #btn 으로 만들었으면 @extend #btn; 으로 불러옴

/* 코드 덩어리 만들기 - 일반적인 코드 형태로 작성하면 됨 */

.btn {margin: 10px; padding: 8px 12px; border: none; border-radius: 5px; font-size: $basicSize;}

/* 불러오기 */
.btn_yellow {@extend .btn; background-color: yellow;}

가운데정렬과 같이 반복되는 코드가 많은데 @extend 를 사용함으로서 코드를 간결하게 쓸 수 있을 것 같다!

☘️ @if, @else, @else if

조건에 따른 분기처리가 가능하다.
자바스크립트의 if-else문과 구조가 비슷하다.

/* SCSS */

$color: orange;

div {
  @if $color == strawberry {
  color: #fe2e2e;
  } @else if $color == orange {
  color: #fe9a2e;
  } @else if $color == banana {
  color: #ffff00;
  } @ else {
  color: #2a1b0a;

값에 따른 분기처리를 scss 단에서 할 수 있다는 것이 좋다.

참조문서

Sass 공식 문서