SASS Function을 활용한 px -> rem 단위 변환

SASS Function을 활용한 px  -> rem 단위 변환

// px to rem
$rem-base: 16px !default;

// STRIP UNIT 
// 측정 단위를 제거하고 반환 
@function strip-unit($num) {
    @return $num / ($num * 0 + 1);  // 10 / 10 * 0 + 1 
}

// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base) {  
    $value: strip-unit($value) / strip-unit($base-value) * 1rem; 
    @if($value == 0rem) {
        $value: 0;
    }
    @return $value;
}

// REM CALC
// rem-calc(10 20 30px 40);
// rem-calc(10);
@function rem-calc($values, $base-value: $rem-base) {
    $max: length($values); 
    @if $max == 1 {
        @return convert-to-rem(nth($values, 1), $base-value);  
    }
    $remValues: ();
    @for $i from 1 through $max {
        $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
    }
    @return $remValues;
}

 

설명

SASS의 Function 기능을 활용하여 디자인 상에 표현되는 px 값을 rem 으로 자동 변환하여 플렉시블 하게 여백 값을 사용할 수 있다.

디자인 상 h1 요소에 padding-top 의 값이 10px 로 표현 되어 있을 때, 아래와 같이 rem-calc 함수를 통해 padding-top 값을 작성한다. 

h1 {padding-top: rem-clac(10);}

 

rem-calc 함수 설명 

$rem-base: 16px !default;

@function rem-calc($values, $base-value: $rem-base) {
    $max: length($values); 
    @if $max == 1 {
        @return convert-to-rem(nth($values, 1), $base-value);  
    }
    $remValues: ();
    @for $i from 1 through $max {
        $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
    }
    @return $remValues;
}

- $rem-base 의 값은 브라우저의 기본 폰트 크기 

- length() 는 해당 리스트의 갯수를 반환한다.  

- nth($list, $n) 는 두번째 값이 n이고 두번째 값의 n번째 인덱스 값을 반환함. 

- append($list, $value) 는 리스트 마지막 요소의 $value 를 추가 함 

 

2-1. $max 값이 1과 같을 경우 convert-to-rem 함수 리턴

2-2. $max 값이 1이 아닌 경우 for 문을 통해서 $max 수까지 반복하여 $remValues에 아래의 값이 append 됨 

 

 

convert-to-rem 함수 설명 

// STRIP UNIT 
// 측정 단위를 제거하고 반환 
@function strip-unit($num) {
    @return $num / ($num * 0 + 1);   // 16px / (16px * 0 + 1)
}

// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base) {  
	// convert-to-rem(nth(10, 1), 16)
    // convert-to-rem(10, 16)
    
    $value: strip-unit(10) / strip-unit(16) * 1rem;  // 1 / 16 * 1 = 0.625rem
    @if($value == 0rem) {
        $value: 0;
    }
    @return $value;
}

- SASS 에서 단위를 제거 하려면 1로 나눠야지 제거 가능함. (하기 strip-unit-function 참고)

 

 

https://css-tricks.com/snippets/sass/strip-unit-function/

https://sass-lang.com/documentation/values/lists#access-an-element

http://megaton111.cafe24.com/2017/01/16/sass-%EB%AC%B8%EB%B2%95-%EB%82%B4%EC%9E%A5%ED%95%A8%EC%88%98%ED%99%9C%EC%9A%A9-%EB%B9%88%EB%8F%84%EA%B0%80-%EB%86%92%EC%9D%80-%ED%95%A8%EC%88%98%EB%93%A4/