-
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.
'코딩 기록 > Sass [SCSS]' 카테고리의 다른 글
Sass[SCSS] 기초 이론 8 - @if @else 조건문 / @for, @each 반복문 (0) 2023.02.14 Sass[SCSS] 활용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($다중 변수, @mixin, @content 등을 이용) (0) 2023.02.12 Sass[SCSS] 기초 이론 6 - 다중 변수 선언, 내장 함수(map-get) (0) 2023.02.12 Sass[SCSS] 기초 이론 5 - 그룹 선언하기, 사용하기, 선택자 속성 사용 (@mixin, @include, @extend) (0) 2023.02.12 Sass[SCSS] 기초 이론 4 - scss에서 연산자 사용하기 (Operations & calc) (0) 2023.02.05 댓글