less: 동적으로 클래스명 할당하기

발생일: 2015.06.05

키워드: less

문제:

엘리먼트의 높이에 따라 `height100px`, `height200px`과 같은 식으로 클래스를 할당하려고 한다.

정상적인 경우엔 이런 클래스를 만들지 않겠지만, 몇 가지 이슈 때문에 우회하는 방법을 선택했다.

여튼, 예를 들어, 100px 부터 2000px 까지 20px 단위로 클래스를 생성할 생각이다.

less 를 쓰고 있는데, 동적으로 클래스명을 할당하면 작성하기 편할 것 같다.

클래스명도 변수를 이용해서 동적으로 생성할 수 있나?

해결책:

클래스명에 `@{변수명}` 형태로 할당하면 된다.

아래 코드처럼 mixin 을 생성해서, 재귀호출하는 식으로 처리했다.

// Mixin: 높이가 2000이 될 때까지 클래스를 생성한다.

.makeHeightClasses(@height) when (@height <= @viewer-max-height) {

    &.is-height@{height} {

        height: @height !important;

    }

 

    .makeHeightClasses(@height + 20);

}

참고:

http://blog.gleitzman.com/post/69120318918/generating-repetitive-css-with-loops-in-less