[scss] mixin - grid-columnizer

상품 나열 등에 사용

// grid-columnizer 믹스인 정의
@mixin grid-columnizer($cols: null, $gaps: null) {
     
    // grid-cols 처리 시작
    // $cols 값이 null인 경우 에러 메시지 출력
    @if $cols == null {
        @error 'grid-columnizer 믹스인에서 cols 값을 전달해야 합니다.';
    }
    // $cols 값이 'none'인 경우 grid-template-columns를 none으로 설정
    @else if $cols == "none" {
        grid-template-columns: none;
    }
    // $cols 값이 단위 없는 숫자인 경우 grid-template-columns를 repeat 함수로 설정
    @else if type-of($cols) == "number" and unitless($cols) {
        grid-template-columns: repeat($cols, minmax(0, 1fr));
    }
    // 위 조건들을 만족하지 않는 나머지 경우에는 $cols 값을 그대로 사용
    else {
        grid-template-columns: $cols;
    }
 
    // gap 처리 시작
    // $gaps 값이 null이 아닌 경우
    @if $gaps != null {
        // $gaps 값이 list가 아니고 단위가 px 또는 vw인 경우
        @if type-of($gaps) != "list" {
            @if unit($gaps) == "vw" or unit($gaps) == "px" {
                gap: $gaps;
            }
            // 허용되지 않는 단위인 경우 에러 메시지 출력
            @else {
                @error '간격(gaps)에 대한 단위가 잘못되었습니다. px와 vw만 허용됩니다.';
            }
        }
        // $gaps 값이 두 개의 요소를 갖는 리스트인 경우
        @else if length($gaps) == 2 {
            @if (unit(nth($gaps, 1)) == "vw" or unit(nth($gaps, 1)) == "px") and (unit(nth($gaps, 2)) == "vw" or unit(nth($gaps, 2)) == "px") {
                row-gap: nth($gaps, 1);
                column-gap: nth($gaps, 2);
            }
            // 허용되지 않는 단위인 경우 에러 메시지 출력
            @else {
                @error '간격(gaps)에 대한 단위가 잘못되었습니다. px와 vw만 허용됩니다.';
            }
        }
    }
}
 
// vw 함수 정의: 특정 픽셀 값을 vw 단위로 변환
@function vw($value) {
    // 1vw의 픽셀 값에 대한 context 설정 (여기서는 750px 기준으로 7.5px)
    $vw-context: (750 * 0.01) * 1px;
    // 입력된 픽셀 값을 vw 단위로 변환하여 반환
    @return ($value/$vw-context) * 1vw;
}
 
 
 
// 사용
.some-element{
    display:grid;
    // 예시
    @include grid-columnizer(2, vw(10px));
    @include grid-columnizer(2, vw(10px) vw(20px));
    @include grid-columnizer(2, 10px);
    @include grid-columnizer(2, 10px 20px);
}