LESSCSS

변수

아래 예제들을 보면 저절로 설명이 가능할 겁니다:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

다음처럼 만들어집니다:

#header { color: #6c94be; }

변수 이름으로 변수를 정의하는 것도 가능합니다:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

이렇게 하면 다음과 같이 변환됩니다:

content: "I am fnord.";

주의하세요. LESS에서 변수는 실질적으로 ‘상수(constants)라고 할 수 있습니다; 왜냐하면 한 번만 정의할 수 있기 때문입니다.

댓글

댓글 본문
작성자
비밀번호
  1. 별모모
    아, 그렇군요. 답변 고맙습니다.
    대화보기
    • 구루비
      #111은 #111111을 줄여서 표기한 것입니다.그래서 #5b83ad + #111111 => #6c94be 가 된 것입니다.
      대화보기
      • Starmomo
        [질문] #5B83AD + #111 = #5B84be 아닌가요?
        #header { color: #6c94be; } => #header { color: #5B84be; }
      • evilcurse
        설명 그대로 이해하시면 될 듯 싶습니다. 변수이름으로 변수를 정의한다.@@var을 하나씩 풀면, @(@var) -> @('fnord') -> @fnord -> "I am fnord." 이렇게 변화한다고 보면 되겠네요.
        대화보기
        • David Seong
          잘몰라서 그러는데, LESS - 변수 두번째 예제에서, content: @@var: 이 content: "I am fnord."; 로 되는 과정에서 @@var이 어떤 역활은 한 것인가요? @nord: "I am fnord."; 를 content: @fnord 라고 작성한 것과 같은 결과가 나오는 이유가 무엇인가요?
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기