10. SCSS 에서 rem 자동변환 함수를 css calc()에 적용 하는 방법

한 라인당 세개씩 나오는 갤러리 리스트가 있다고 가정해 보자.

css 의 display 는 flex 로 구성 된다고 가정해 보자.

가정된 레이아웃의 이미지는 아래와 같이 나오게 될 것이다.

 

안에 들어간 이미지와 텍스트는 무시하고 이 레이아웃만 구성하기로 해보자

 

HTML

<div class="gallery">

    <div class="item">

    </div>

    <div class="item">

    </div>

    <div class="item">

    </div>

    <div class="item">

    </div>

    <div class="item">

    </div>

    <div class="item">

    </div>

</div>

 

SCSS

.gallery {

    display: flex;

    flex-wrap: wrap;

    .item {

        width: calc((100% - ppr(40)) / 3); // (전체 3개 - 1개) * margin-left값인 20픽셀 = 40픽셀

        height: ppr(300); // 임시코드

        background-color: #f1f1f1; // 임시코드

        margin-left: ppr(20);

        &:nth-child(3n+1) {

            margin-left: 0;

        }

        &:nth-child(n+4) {

            margin-top: ppr(20);

        }

    }

}

 

위와 같이 작성하게 되면 item 클래스에서 width 부분이 에러가 날 것이다.

css 자체 함수인 calc 함수내에서 외부 함수가 동작하게 되면 발생되는 오류 이슈인데 이럴 떄는 ppr(픽셀 수) 부분을 #{} 로 한번 감싸주면 된다.

width: calc((100% - #{ppr(40)}) / 3)

.gallery {

    display: flex;

    flex-wrap: wrap;

    .item {

        width: calc((100% - #{ppr(40)}) / 3); // (전체 3개 - 1개) * margin-left값인 20픽셀 = 40픽셀

        height: ppr(300); // 임시코드

        background-color: #f1f1f1; // 임시코드

        margin-left: ppr(20);

        &:nth-child(3n+1) {

            margin-left: 0; // 1, 4, 7, 10 ... 번째 item에는 margin-left: 0;

        }

        &:nth-child(n+4) {

            margin-top: ppr(20); // 3번째 이후부터는 margin-top: 1.25rem(20픽셀의 rem자동 변환)

        }

    }

}

 

결과를 확인해 보면

위처럼 나오게 되면 성공.

 

참고 : ppr() 함수에 대해 참고 하세요.