[Sass 문법 정리] 6. @function, if() - 함수

4.9. @function – 함수

함수와 믹스인은 유사하지만 함수는 반환 값이 있다는 점에서 믹스인과 다릅니다.

함수와 믹스인 정의 예제

// Mixins 정의
@mixin 믹스인이름($매개변수) {
  스타일;
}
// Functions의 정의
@function 함수이름($매개변수) {
  @return 값
}

함수와 믹스인 사용 예제

// Mixin의 사용
@include 믹스인이름(인수);
// Functions 의 사용
함수이름(인수)

SCSS예제

$max-width: 980px;
@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}
.box_group {
  width: $max-width;
  .box1 {
    width: columns();  // 1
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}

*내장함수와 중복되지않는 이름 값을 가지도록 하세요!

 

4.9.1 – if() – 함수

if함수는 3항연산자와 같은 개념입니다. ex) if a > b ? 1 : 2

문법

if(조건, 표현식1, 표현식2)

SCSS예제

$width: 555px;
div {
  width: if($width > 300px, $width, null);
}

컴파일후CSS

div {
  width: 555px;
}