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

카테고리

분류 전체보기 (710)
About me. (6)
Daylogs (675)
영어공부 (0)
My works - 추억 (29)
비공개 (0)