Sass[SCSS] 기초 이론 7 - @function 함수, @return 반환

Sass[Scss]

Sass[SCSS] 기초 이론 7 - @function 함수를 알아보도록 할게요.

 

@mixin과 비슷한 느낌으로 사용하면 되는데 차이점은 @mixin은 해당하는 스타일 css들을 반환하고,

@function은 @return으로 '값'을 반환합니다.

 

사용용도가 값을 반환하는거라 계산식에서 자주 쓰이는 경우가 있습니다. 바로 예를 들어보도록 할게요.

@function vw($value, $deviceWidth:1400px) {
  @if $deviceWidth == pc {
    $deviceWidth: 1400; /* 만약 인자가 pc라면 1400 기준 */
  }
  @else if $deviceWidth == mobile {
    $deviceWidth: 767; /* 만약 인자가 mobile이라면 767 기준 */
  }

  @return ($value * 100vw) / $deviceWidth; /* vw 계산 */
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h3 {
    font-size: vw(40, pc); /* 1400 너비에서 40px로 보이는 vw 값 */
  }
  p {
    font-size: vw(15, mobile); /* 767 너비에서 15px로 보이는 vw 값 */
  }
}

vw 계산식에 쓰이는 vw 함수의 예시인데,

각각 기준너비(두번째 인자)에서 해당 px 크기(첫번째 인자) 로 보이도록 만들어주는 값을 계산해줍니다.

 

 

See the Pen Sass[SCSS] @function 함수, @return 반환 by kimyangsun (@kimyangsun) on CodePen.