LESS의 문법과 사용

🗓2020년 02월 27일 ∙ 🖊TutorialPost ∙ ⏳1분

LESS는 Sass와 더불어 많이 사용되는 CSS Pre Processor의 일종입니다. 최근에는 sass의 일종인 scss가 가장 폭넓게 사용되지만 여전히 레거시 코드에서는 꾸준히 사용되고 있습니다.

http://lesscss.org/

변수

@ 기호를 이용해 변수를 정의할 수 있습니다.

@primary-color: #ff9900;

.logo {
  color: @primary-color;
}

내장 함수

손쉬운 css 확장을 위한 함수를 제공합니다.

@link-color: #0000ff;

a {
  color: @link-color;
}
a:hover {
  color: lighten(@link-color, 25%);
}
a:active {
  color: darken(@link-color, 20%);
}

믹스인

재사용 가능한 CSS 선언을 정의하는 방법으로 프로그래밍 언어의 함수 정의 및 사용과 비슷합니다.

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  border-radius: @radius;
}

.my-element {
  .border-radius(5px);
}

중첩

header {
  background-color: blue;
  nav {
    color: yellow;
  }
}

a {
  color: #000099;
  &:visited {
    color: #330099;
  }
  &:hover {
    color: #0000ff;
  }
  &:active {
    color: #ff0099;
  }
}

Import

@import 를 사용하면 개발단계에서 스타일시트를 여러 파일로 분할하여 관리할 수 있으며, 컴파일 과정에서 하나의 css 파일로 합칠수 있게됩니다.

@import "common-less-file";
SHARE