[CSS] LESS Mixins, 함수와 연산, 변수, Nesting

[CSS] LESS, 너는 뭐가 다른 거야?!

소개

LESS는 CSS의 확장 버전으로, 변수, 함수, 연산, 중첩, 스코프 등의 기능을 추가하여 CSS에 Script의 능력을 덧붙여 확장한 언어입니다. CSS Preprocessor(전처리기)로서, CSS를 변수나 Nested Rules을 이용하여 쉽고 빠르고 체계적으로 프로그래밍할 수 있게 만든 것입니다. CSS의 기존 문법을 그대로 사용하기 때문에 익히기 쉬운 장점이 있으며, 하위 호환성이 뛰어나다는 특징이 있습니다. 이번 포스팅에서는 LESS의 주요 기능인 변수, Mixins, Nesting, 함수와 연산에 대해 자세히 살펴보겠습니다.

LESS 변수

LESS에서는 변수를 사용하여 여러 번 반복되는 값을 재사용할 수 있습니다. 변수를 사용하면 값이 변경되는 경우 해당 변수만 수정하면 모든 곳에서 사용되는 값이 한 번에 변경되는 장점이 있습니다.

@primary-color: #3498db;
@secondary-color: #e74c3c;

.button {
  background-color: @primary-color;
  color: #fff;
}

.link {
  color: @secondary-color;
}

LESS Mixins

Mixin은 한 클래스 안에서 다른 클래스의 모든 속성들을 포함시킬 수 있도록 해주는 기능입니다. 변수와 비슷하게 보이지만, 사실은 클래스 전체를 의미하며, 함수처럼 변수를 받아들일 수도 있습니다.

.border-radius(@radius) {
  border-radius: @radius;
}

.button {
  .border-radius(4px);
}

Nesting

LESS에서는 CSS 속성 상속을 간결하게 작성하기 위해 Nesting 기능을 제공합니다. 긴 선택자(selector)를 만드는 대신 한 선택자를 다른 선택자 안에 포함시킴으로써 CSS 속성 상속을 편리하게 사용할 수 있습니다.

.header {
  background-color: #f1c40f;
  padding: 10px;

  h1 {
    font-size: 24px;
    color: #fff;
  }

  p {
    font-size: 16px;
    color: #333;
  }
}

LESS 함수와 연산

LESS는 함수와 연산을 지원하여 스타일을 동적으로 처리할 수 있습니다. 산술 연산, 색상 조정, 문자열 조작 등 다양한 함수를 사용하여 스타일을 다양하게 조작할 수 있습니다.

@base-size: 14px;
@line-height: 1.5;

body {
  font-size: @base-size;
  line-height: @line-height;
}

h1 {
  font-size: @base-size * 2;
  line-height: @line-height * 2;
}

결론

LESS는 CSS를 보다 간편하고 체계적으로 작성할 수 있도록 도와주는 CSS Preprocessor입니다. 변수, Mixins, Nesting, 함수와 연산을 활용하여 스타일을 더욱 효율적으로 관리할 수 있으며, 기존 CSS의 하위 호환성을 그대로 유지하면서도 기능을 확장시킬 수 있습니다. LESS를 사용하여 웹 개발을 할 때, 보다 효율적이고 재사용성이 높은 스타일링을 구현할 수 있습니다.

참고 자료

• LESS Official Website
• LESS Documentation