LESS 변수 & 믹스인(Mixins)

LESS 변수와 믹스인

LESS는 CSS의 확장 언어로서 CSS와의 호환성도 있을 뿐만 아니라 추가적으로 기존 CSS 구문을 사용할 수도 있습니다.

이 글에서는 LESS 문법 중 변수 및 믹스인 사용 방법에 대해 알아보는 시간을 가져보겠습니다. 

Variables

LESS 변수는 변수명 앞에 @를 붙여서 표기합니다. (@variables)

다음의 예제를 살펴보겠습니다.

LESS

@red: red;
@light-red: @red + #222; // 연산
#header {
  color: @light-red;
}

@friend : "I have a friends.";
@overVar : 'friend'; // @friend 변수를 또 다른 변수로 사용하기 위해 문자열로 참조
.demo {
  content: @@overVar; // @(@overVar) -> @('friend') -> @friend -> "I have a friends." 로 치환된다.
  margin: 10px;
}

컴파일된 CSS

#header {
  color: #ff2222;
}
.demo {
  content: "I have a friends.";
  margin: 10px;
}

LESS에서 변수는 실질적으로 상수(constants)로서 문서읽기가 완료되는 시점에서 한 번만 정의됩니다.

다시 말해, 한 번만 정의할 수 있습니다.

Mixins(믹스인)

자바스크립트의 디자인 패턴 중 믹스인 패턴이라고 있습니다.

믹스인 패턴은 객체의 속성을 복사해서 새로운 객체를 생성하는 패턴을 말하는데 jQuery 를 예로 들자면 $.extend() 유틸리티 메소드가 믹스인 패턴의 전형이라고 할 수 있습니다.

jQuery 플러그인 개발 시, 사용자 정의의 속성을 복사해서 기본 속성에 덮어써서 새로운 객체를 만드는 것, 그것이 믹스인 패턴을 응용한 것이라고 할 수 있습니다.

이러한 패턴을 SASS,LESS 와 같은 컴프레서 언어에서 차용하여 비슷한 패턴을 사용하는데 여기서 소개하는 믹스인이 이와 유사하다고 할 수 있습니다.

LESS에서는 하나의 룰셋에서 CSS 속성을 여러 개 포함하여 다른 룰셋에 포함시키는 것이 가능합니다. 

예를 들어, 다음과 같은 클래스를 정의하도록 합니다.

LESS

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

이 속성들이 포함된 클래스를 다른 룰셋에서 사용하기 위해서는 포함시키려는 속성이 들어있는 룰셋에다가 클래스의 이름을 집어넣기만 하면 됩니다 :

LESS

#menu a {
 color: #111;
 .bordered;
}
.post a {
 color: red;
 .bordered;
}

.bordered 를 사용하려는 곳에 작성하면 되는 것입니다.

컴파일된 CSS

#menu a {
   color: #111;
   border-top: dotted 1px black;
   border-bottom: solid 2px black;
}
.post a {
   color: red;
   border-top: dotted 1px black;
   border-bottom: solid 2px black;
}

CSS class나 id 규칙으로 작성하면 위와 같은 방식으로 믹스인할 수 있습니다.

기존 스타일에서 믹스인 사용해 보기

LESS

.a, #b {
  color: red;
}
.demo-01 {
  .a();
}
.demo-02 {
  #b();
}

컴파일된 css

.a, #b {
  color: red;
}
.demo-01 {
  color: red;
}
.demo-02 {
  color: red;
}

사용자는 믹스인을 호출할 때 괄호는 옵션인 점에 유의하시기 바랍니다.

css

// 이 두 문장은 동일한 작업을 수행합니다.
.a(); 
.a;

믹스인을 출력하지 않기

사용자는 믹스인을 만들고 싶지만, 사용자가 그 믹스인을 출력 할 필요가 없는 경우에는 그 뒤에 괄호를 넣을 수 있습니다.

위에서 설명한 믹스인의 경우에는 CSS로 컴파일 되어 출력되기 때문에 믹스인으로서 역할만 필요할 경우에는 불필요할 수도 있습니다.

다음 아래의 코드를 살펴봅니다.

less

// my-mixin 은 출력된다
.my-mixin {
        // 괄호가 붙지 않은 믹스인은 컴파일됩니다.
	color: black;
}

// my-other-mixin 은 출력되지 않는다
.my-other-mixin() {
       // 괄호가 붙은 믹스인은 css 파일에 출력(컴파일)되지 않습니다.
	background: white;
}

.demo {
	.my-mixin;
	.my-other-mixin;
}

컴파일된 css

.my-mixin {
  color: black;
}
.demo {
  color: black;
  background: white;
}

믹스인의 선택자들

믹스인은 많은 속성을 포함할 수 있을 뿐만 아니라 더 많은 선택자를 포함할 수도 있습니다.

less

.my-hover-mixin() {
	&:hover {
		border: 1px solid red;
	}
}
button {
	.my-hover-mixin();
}

컴파일된 css

button:hover {
  border: 1px solid red;
}

네임스페이스(Namespaces)

사용자는 믹스인 속성들을 내부에서 좀 더 복잡한 선택자를 사용하고 싶다면 사용자는 CSS 기존 문법과 아래에 언급되는 방법으로 아이디 또는 클래스를 쌓거나 상속시켜 작성할 수 있습니다.

less

#outer {
	.inner {
		color: red;
	}
}

.c {
	#outer > .inner;
}

컴파일된 CSS

#outer .inner {
  color: red;
}
.c {
  color: red;
}

#outer > .inner; 와 같은 작성 방식(> 사용) 이외에 빈 공백을 선택적으로 사용할 수 있습니다.

아래 문법은 모두 같은 결과를 나타냅니다.

less

#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

위와 같은 사용은 네임스페이스로 알려져 있습니다. 여러분은 아이디 선택자 아래에 믹스인을 작성할 수 있으며 아이디 선택자 아래에 놓음으로서 다른 라이브러리와의 충돌을 피할 수 있습니다.

다음의 예제를 살펴봅니다.

less

#my-library {
	.my-mixin() {
		color: black;
	}
}
// which can be used like this
.class {
	#my-library > .my-mixin();
}

컴파일된 css

.class {
  color: black;
}

Guarded Namespaces(보호된 네임스페이스)

네임 스페이스가 가드를 가지고 있다면, 그것에 의해 정의 된 믹스 인 가드 조건이 true를 반환하는 경우에만 사용됩니다.

가드(Guards)

단순히 값이나 인자의 개수(arity)가 아니라, 표현식(expression)과 일치하는 것을 찾을 경우에 가드가 유용합니다. 

즉, 보호된 네임스페이스를 이용하려면 조건이 맞아야 그것을 사용할 수 있는 것입니다.

다음의 예제를 살펴보겠습니다.

less

@mode : huge;

#namespace when (@mode = huge) { // 조건이 true 일 경우에 믹스인 사용가능
	.mixin() {
		border: 1px solid darkblue;
		padding: 10px;
	}
}

.guardedNamespace {
	#namespace > .mixin()
}

컴파일된 css

.guardedNamespace {
  border: 1px solid darkblue;
  padding: 10px;
}

이 코드에서는 when (@mode = huge) 조건에 해당하는 상단의 @mode : huge; 가 정의되어 있지 않으면 믹스인을 사용할 수 없을 것이고 컴파일 에러가 발생할 것입니다.

네임스페이스 가드 때문에 다음의 두가지 믹스인 방식은 동일하게 작동,평가됩니다.

less

#namespace when (@color =  red) {
     .mixin() { 
        padding: 10px;
     }
}

#namespace {
     .mixin() when (@color =  red) { 
        padding: 10px;
     }
}

The !important keyword

믹스인 뒤에 !important 키워드를 작성하면 모든 속성값들에 !important 가 상속됩니다.

less

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

컴파일된 css

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

지금까지 변수 그리고 믹스인에 대해 알아보았습니다.

믹스인은 기초적인 syntax 만을 알아보았으며 다음 포스팅에서 좀 더 다뤄보도록 하겠습니다.

Jaehee's WebClub