개발일지

Less에서 Loop문 사용하기

그리드 시스템을 손수 작성해야 한다면 Less의 Mixin기능은 필수적입니다.
혹은 아래와 같이, 중첩되면서도 조금씩 변화하는 CSS를 n개 생성해야 할 경우에도 유용하게 사용할 수 있습니다.

  .box{font-size:10px;}
  .box>box{font-size:11px;}
  .box>box>box{font-size:12px;}

위와 같은 구조를 less로 작성한 결과물은 다음과 같습니다.

See the Pen LESS의 MIXIN재귀호출 예제 by cinos (@shoveller) on CodePen.

less에서는 반복문을 재귀호출로 작성해야 하고, if~else statement를 제공하지 않기 때문에 제약이 심합니다.
또한 사용할수 있는 자료형도 문자형과 실수형이 전부입니다.

less 믹스인 안에서 문자열을 css요소로 변환하려면?

중첩된 믹스인의 시작점에서 셀렉터를 “.box” 라는 문자열로 전달하고 있습니다.
.box-loop(@boxWidth:500,@nextSelectorStr:".box",@orgSelectorStr:".box");

“.box” 는 문자열이기 때문에 그대로 css로 변환시키면 다음과 같은 형태가 되어버립니다.
".box":{width:50;}

따라서 문자열을 css요소로 변환시키려면 다음 두 요소를 사용합니다.
~: 문자열 아님
'@{변수}': 변수를 문자열로 출력

따라서 아래 문장의 의미는
“@nextSelectorStr 라는 변수를 문자열로 출력하고,
그 값을 문자열이 아닌 형태로 변수 @selector에 저장하라” 가 됩니다.
@selector: ~'@{nextSelectorStr}';

less 믹스인 안에서 문자열을 합치려면?(concat)

다음의 요소를 사용하면 문자열을 합칠 수 있습니다.
'@{변수}': 변수를 문자열로 출력

따라서 아래 문장의 의미는 “@nextSelectorStr 라는 변수의 값과 >라는 문자열 @orgSelectorStr라는 변수의 값을 더해서 문자열로 출력하고,
그 값을 변수 @nextSpetSelectorStr에 복사하라” 가 됩니다.
@nextSpetSelectorStr: '@{nextSelectorStr}>@{orgSelectorStr}';