LESSCSS

자바스크립트 표현식 인식하기

.less 파일 안에서 자바스크립트 표현식들을 변수값으로 인식하게 할 수 있습니다. 이것은 백틱 기호 (`)로 자바스크립트 표현식을 둘러싸면 됩니다.

@var: `"hello".toUpperCase() + '!'`;

위 표현은 아래와 같이 됩니다:

@var: "HELLO!";

문자열을 치환자 ({ } 로 둘러싸기 - 역자 주)와 이스케이프 기호 (~ 기호 - 역자 주)를 써서 바꿀 수도 있습니다.

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

위 표현은 아래와 같이 됩니다:

@var: HELLO!;

또한 자바스크립트 속성값에 직접 접근할 수도 있습니다:

@height: `document.body.clientHeight`;

만약 자바스크립트 문자열을 HEX 색상값으로 변환시키고 싶다면 color 함수를 쓰면 됩니다:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

댓글

댓글 본문
  1. Wassup
    @str: "hello";
    @var: ~`"@{str}".toUpperCase() + '!'`;

    위와 같이 하면 에러나네요.
    대신 아래와 같이 사용하니 되네요.

    1. HELLO!
    @str: hello;
    @var: ~`"@{str}".toUpperCase() + '!'`;

    2. HELLO!
    @str: "hello";
    @var: ~`@{str}.toUpperCase() + '!'`;
  2. 문자열 치환자
    자바스크립트 접근 부분이 오류나서
    직접 복사해서 사용해봤는데도 오류가 나는데
    저만 그런걸까요?
graphittie 자세히 보기