CSS Preprocessor [Less]

CSS Preprocessor [Less]

CSS preprocessror Less 사용법

Less 사용법

• Node.js와 함께 사용. [Node.js 설치 필수]
  npm install -g less
  lessc styles.less > styles.css 혹은 styles.less styles.css
  브라우저가 less 파일을 읽지 못 하기 때문에 css로 컴파일 해주어야 한다.

• less.js 파일과 함께 사용.

  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>

변수 (Variables)

• Less

  @background-color: skyblue;
  @padding: 10px;
  @margin: @padding + 2px;
  @border: 1px solid black;

• css

  .title {
    background-color: @background-color;
    padding: @padding;
    margin: @margin;
    border: @border;
    color: white;
    display: inline-block;
  }

믹스인 (Mixins)

• 하나의 룰셋에서 다른 룰셋으로 여러 속성을 혼합할 수 있다.

  .reset {
    list-style-type: none;
    background-color: tomato;
    display: inline-block;
    padding: 10px;
    color: white;
  }

  위 클래스를 다른 룰셋에서 사용하고 싶을 때, 아래와 같이 입력하면 된다.

  .posts li {
    .reset;
    color: blue;
  }

중첩 (Nesting)

• css

  .header {
  padding: 10px;
  }
  .header ul.nav_menus {
  float: right;
  }
  .header ul.nav_menus li {
  float: right;
  margin: 5px;
  list-style-type: none;
  }

• less

  .header {
    padding: 10px;
    ul.nav_menus {
      float: right;
      li {
        float: left;
        margin: 5px;
        list-style-type: none;
      }
    }
  }

중첩 및 버블링 (Nested At-Rules and Bubbling)

@media or @suppots와 같은 규칙은 선택자와 같은 방식으로 중첩될 수 있다. At-rules은 동일한 규칙 집합 내의 다른 요소에 대해 상대적인 순서는 변하지 않는다.

• less

  body {
    @media screen {
      background-color: lightblue;
      @media (min-width: 768px) {
        background-color: lightgrey;
      }
      @media (min-width: 1280px) {
        background-color: bisque;
      }
    }
    @media tv {
      background-color: steelblue;
    }
  }

• css

  @media screen {
    body {
      background-color: lightblue;
    }
  }
  @media screen and (min-width: 768px) {
    body {
      background-color: lightgrey;
    }
  }
  @media screen and (min-width: 1280px) {
    body {
      background-color: bisque;
    }
  }
  @media tv {
    body {
      background-color: steelblue;
    }
  }

연산자 (Operations)

+, -. , /와 같은 연산자로 색상이나 변수를 조작할 수 있다. 변환이 불가능하거나 무의미한 경우 단위는 무시된다.
** 불가능한 단위 변환 : px -> cm or red -> % ***

  /* 숫자들이 같은 단위로 변환 */
  @conversion-1 : 5cm+10mm; // 6cm
  @coversion-2 : 2 - 3cm - 5mm; // -1.5cm

  /* 변환 불가능 */
  @incompatible-units: 2 + 5px - 3cm;

  /* 변수를 사용한 예제 */
  @defalut: 10px;
  @filter: @defalut * 2; // 20px
  @other: @defalut + @filter; // 30px;

  /* 색상 */
  @color: #888888 / 2; // 444444

  .wrap {
    background-color: @color + #111111; // 555555
  }

calc()

  /* calc() */
  @var: 20px;

  .wrap {
    width: calc(100% - @var); // width: calc(100% - 20px);
  }

빠져나가기 (Escaping)

임의의 문자열 앞에 '~'를 사용하여 속성 또는 변수 값으로 사용할 수 있다.

• less

  @wrap_min: ~"(min-width:768px)";
  
  .wrap {
    @media @wrap_min {
      background-color: peru;
    }
  }

• css

  @media (min-width:768px) {
    .wrap {
      background-color: peru;
    }
  }

함수 (Functions)

less는 색상 변환 및 문자열을 조작하는 둥 다양한 기능을 제공한다. 자세한 내용은 여기를 참고하라.

• less

  /* 변수 선언 */
  @col: foo;
  
  /* if, iscolor 함수 사용 */
  .wrap {
    background-color: if((iscolor(@col)), @col, lightblue);
  } 

• css

  .wrap {
    background-color: lightblue;
  }

네임스페이스와 접근자 (Namespaces and Accessors)

변수 및 믹스인을 그룹핑 하거나 캡슐화된 소스를 제공하고 싶을 때가 있다. 아래의 코드와 같이 매우 직관적으로 변수와 믹스인을 묶을 수 있다.

• less

  #bundle() {
    .button {
      background-color: hotpink;
      outline: none;
      color: white;
      &:hover {
        opacity: 0.8;
      }
    }
    .padding {
      padding: 15px;
    }
    .margin {
      margin: 10px;
    }
  }
  /* 호출 */
  .button_area button {
  #bundle.button();
  }

• css

  .button_area button {
    background-color: hotpink;
    outline: none;
    color: white;
  }
  .button_area button:hover {
    opacity: 0.8;
  }

지도 (Maps)

• less

  #colors() {
    primary: blue;
    secondary: green;
  }
  
  .button {
    color: #colors[primary];
    border: 1px solid #colors[secondary];
  }

• css

  .button {
    color: blue;
    border: 1px solid green;
  }

범위 (Scope)

Less의 스코프는 일반 프로그래밍 언어의 스코프와 매우 유사합니다. 먼저 지역 스코프에서 해당 변수를 찾고, 지역에서 찾을 수 없을 시 부모 범위에서 상속됩니다.

  /* 전역 스코프 */
  @para_color: red;

  .section {
    // 지역 스코프
    @para_color: blue;
    .para {
      color: @para_color;   // blue
    }
  }

  .section {
    // 지역 스코프
    .para {
      color: @para_color;   // blue
    }
    // 꼭 참조되는 라인 위에 적을 필요가 없다.
    @para_color: blue;
  }

  .section {
    // 지역 스코프 내에 변수 @para_color가 없다!
    .para {
      color: @para_color;   // red
    }
  }

주석 (Coments)

한 줄 주석 (//) 과 여러줄 주석 (/**/) 모두 사용할 수 있지만 CSS 컴파일 시 한 줄 주석 (//)은 출력되지 않습니다.

• less

  @bar: red;
  
  /* 여러줄 주석입니다. */
  // 한 줄 주석입니다.
  .wrap {
    color: @bar
  }

  /* 여러줄 주석입니다. */
  .wrap {
    color: red;
  }

가져오기 (Importing)

less, css 파일을 가져올 수 있습니다. 가져온 less 파일의 모든 변수를 사용할 수 있습니다. 확장자는 less 파일에 대해서만 선택적으로 지정됩니다.

  @import "library";   // library.less
  @import "typo.css";