Less Variables

Less Variables

변수 (Variables)

변수는 한 위치에서 값을 제어할 수 있는 방법을 제공하며, 코드를 보다 쉽게 관리 및 유지할 수 있게 도와준다.

• 일반적인 CSS 코드

  a,
  .link {
    color: red;
  }
  .widget {
    color: white;
    background: red;
  }

• 변수를 사용한 코드

  // 변수
  @link-color: red;
  @link-color-hover: hotpink;
  
  // 사용법
  a,
  .link {
    color: @link-color; // red
  }
  a:hover {
    color: @link-color-hover; // hotpink
  }
  .widget {
    color: white;
    background: @link-color;  // red
  }

변수 보간법 (Variable Interpolation)

변수 보간법은 변수를 선택자, 속성 이름, URL, @import와 같은 다른 장소에서도 사용할 수 있게 한다.

1. 선택자

• less

  // 변수
  @my-selector: banner;
  
  // 사용법
  .@{my-selector} {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
  }

• css

  .banner {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
  }

  2. URLs3. 문장 가져오기 (Import Statements)4. 프로퍼티 (Properties)
• // 변수 @themes: "../../src/themes"; // 사용법 @import "@{themes}/tidal-wave.less";
• // 변수 @images: "../img"; // 사용법 body { color: #444; background: url("@{images}/white-sand.png"); }

• less

  @property: color;
  
  .widget {
    @{property}: skyblue;
    background-@{property}: gray;
  }

• css

  .widget{
    color: skyblue;
    background-color: gray;
  }

  5. 변수-변수 (Variable Variables)
• 변수에 다른 변수를 할당하여 변수의 이름을 정의할 수 있다.

• less

  @primary:  green;
  @secondary: blue;
  
  .section {
    // 지역변수 color에 전역변수 primary 할당
    @color: primary;
  
    .element {
      color: @@color; // green
    }
  }

• css

  .section .element {
    color: green;
  }

  6. 게으른 평가 (Lazy Evaluation)
• 변수를 사용하기 전에 선언할 필요가 없다. 사용 후에 선언해도 무방.

• less

  /* 유효한 표현 1 */
  .lazy-eval {
    width: @var;
  }
  
  // 변수 @var에 변수 @a 할당
  @var: @a;
  @a: 9%;
  
  /* 유효한 표현 2 */
  .lazy-eval {
    width: @var;
    @a: 9%;
  }
  
  @var: @a;
  @a: 100%;

• css

  .lazy-eval {
    width: 9%;
  }

• 변수를 두 번 정의하면 현재 범위에서 위쪽으로 검색하며 타고 올라간다. 변수의 마지막 정의가 사용됨. CSS처럼 내부의 마지막 속성을 사용하여 값을 결정한다고 생각하면 쉽다.*

• less

    @var: 0;
  .class {
    @var: 1;
    .brass {
      @var: 2;
      three: @var;
      @var: 3;
    }
    one: @var;
  }

• css

  .class {
    one: 1;
  }
  .class .brass {
    three: 3;
  }

7. 변수로서의 속성 (Properties as Variables (NEW!))

$prop 구문을 사용하여 변수와 같은 속성을 쉽게 처리하며, 코드가 더 가벼워질 수 있다.

• less

  .widget {
  color: skyblue;
  // 프로퍼티 color에 $ 기호를 붙여 background-color 프로퍼티의 값으로 정의.
  background-color: $color;
  }

• css

  .widget {
  color: skyblue;
  background-color: skyblue;
  }

• 6번에서 설명한 내용처럼, Less는 현재/부모 범위 내의 마지막 속성을 '최종'값으로 설정한다.*
• less

  .block {
  color: red; 
  .inner {
    /* 부모 범위 내의 마지막 속성을 최종 값으로 선택하기 때문에 blue가 값이 된다. */
    background-color: $color; // blue
  }
  color: blue;  
  } 

• css

  .block {
    color: red; 
    color: blue;  
  } 
  .block .inner {
    background-color: blue; 
  }