본문으로 바로가기

LESS Mixin Guards & CSS Guards

category StyleSheet/LESS 2016. 9. 29. 09:58

Mixin & CSS Guards

이 글에서는 믹스인 가드와 CSS 가드에 대해 알아봅니다.

믹스인 가드와 CSS 가드 원문보기





Mixin Guards(믹스인 가드)

먼저 Guard란 용어부터 짚고 넘아가 보겠습니다.


Guard 는 함수형 프로그래밍에서 사용하곤 하는데 가드는 우리가 어떠한 조건의 검사를 하는 것을 강조하고 있습니다. 

무언가를 정말 가드(보호,지키는 것)치는 겁니다.  

요점은 guard가 일반 if문에 비해서 좀더 조건검사에 있어서 명료한 구문이라는 점입니다.

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


LESS는 CSS의 본래 정의를 충실하게 반영하기 위해서 if/else 조건문 대신에 미디어쿼리에 있는 기능인 가드된 믹스인을 채택하여 제공하고 있습니다.

다음은 미디어쿼리 구문입니다.

컴파일된 css
@media (min-width: 769px) {
	nav {
		padding: 10px;
		text-align: left;
	}
}

예제 코드인 미디어쿼리에서는 min-width: 769px; 이 만족하면 실행하는 것처럼 믹스인 가드도 비슷하게 조건이 만족하면 실행할 수 있도록 설계한 것입니다.

다음의 믹스인 가드 예제를 살펴봅니다.

less
.mixin (@a) when (lightness(@a) >= 50%) {
	background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
	background-color: white;
}
.mixin (@a) {
	color: @a;
}
// 믹스인 가드 호출
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
컴파일된 css
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

믹스인 가드를 사용할 때는 when 키워드가 열쇠입니다.

lightness()는 LESS에서 제공해주고 있는 함수로 믹스인 가드를 호출할 때 인자로 넘겨 받은 값이 when 에서 만족하면 룰셋 내부의 코드가 CSS로 출력되게 됩니다.



Guard Comparison Operators(가드 비교 연산자)

가드에서 비교 연산자는 >, >=, =, =<, < 를 사용할 수 있습니다.

true 키워드는 아래 두 믹스인을 동등하게 사용할 수 있습니다.

less
.truth (@a) when (@a) {
	line-height: 1;
}
.truth (@a) when (@a = true) {
	position: absolute;
}

.demo-01 {
	.truth(40) // 위에 정의된 조건과 맞지 않아서 컴파일되지 않는다.
}

.demo-02 {
	.truth(true)
}
컴파일된 css
.demo-02 {
  line-height: 1;
  position: absolute;
}


다음과 같이 사용할 수도 있습니다.

less
@debug: true;
header {
	 // 단독 속성을 위한 가드
	& when (@debug = true) {
		background-color: yellow;
	}
	 // 중첩 규칙을 위한 가드
	#title when (@debug = true) {
		background-color: orange;
	}
}
컴파일된 css
header {
  background-color: yellow;
}
header #title {
  background-color: orange;
}



Guard Logical Operators(가드 논리 연산자)

사용자는 가드로 논리연산자를 사용할 수 있고 그 문법은 미디어쿼리 용법을 기반으로 하고 있습니다.

가드를 조합하기 위해 and 키워드를 사용할 수 있습니다. 다음과 같이 : 

less
.guard-mixin (@a) when (isnumber(@a)) and (@a > 0) {
	padding: 10px;
}

.demo-01 {
	.guard-mixin(0); // 조건이 맞지 않아서 컴파일 되지 않는다.
}
.demo-02 {
	.guard-mixin(true) // 조건이 맞지 않아서 컴파일 되지 않는다.
}
.demo-03 {
	.guard-mixin(7) // 조건에 부합하여 컴파일된다.
}
컴파일된 css
.demo-03 {
  padding: 10px;
}


또한 사용자는 가드에 콤마(,)를 사용함으로써 or 연산자를 흉내낼 수 있습니다.

다음은 10보다 크거나 -10보다 작을 경우를 or 연산자인 콤마(,)를 사용했습니다.

less
.or-guard (@a) when (@a > 10), (@a < -10) {
	text-align: left;
	list-style: circle;
}

.demo-01 {
.or-guard(8) // 조건 부합 X
}
.demo-02 {
	.or-guard(-1) // 조건 부합 X
}
.demo-03 {
	.or-guard(12) // 조건 부합 O
}
컴파일된 css
.demo-03 {
  text-align: left;
  list-style: circle;
}


not 키워드는 조건을 부정하는데 사용할 수 있습니다.

less
.or-guard (@b) when not (@b > 0) {
	text-align: left;
	list-style: circle;
}

.demo-01 {
.or-guard(8) // 조건 부합 X
}
.demo-02 {
	.or-guard(-1) // 조건 부합 O
}
.demo-03 {
	.or-guard(12) // 조건 부합 x
}
컴파일된 css
.demo-02 {
  text-align: left;
  list-style: circle;
}



Type Checking Functions(타입을 체크하는 함수)

사용자가 값 타입에 따라 믹스인을 일치시키고 싶은 경우에는 is... 함수를 사용할 수 있습니다.


다음은 기본 타입을 체크하는 함수입니다.

  • iscolor 
  • isnumber 
  • isstring 
  • iskeyword 
  • isurl


less
.is-type (@a; @b: 0) when (isnumber(@b)) {
	margin: 10px;
	position: relative;
}

.demo-01 {
.is-type(1, @b : string) // 조건 부합 X
}
.demo-02 {
	.is-type(true, 10) // 조건 부합 O
}
.demo-03 {
	.is-type(true, true) // 조건 부합 x
}
컴파일된 css
.demo-02 {
  margin: 10px;
  position: relative;
}



Conditional Mixins(조건부 믹스인)

default() 함수는 다른 믹스인 일치 여부에 따라서 믹스인 일치를 만드는데 것에 유용할 것입니다.

다시 말해, 조건부 믹스인은 else 문과 유사하게 사용할 수 있습니다.

less
.else-mixin (@a) when (@a > 0) {
	background: #fff;
}

// 첫 번째 믹스인이 수행하지 않으면 default()인 조건부 믹스인이 수행된다.
.else-mixin (@a) when (default()) {
	color: red;
}

.test-01 {
	.else-mixin(1)
}
.test-02 {
	.else-mixin(-3)
}
컴파일된 css
.test-01 {
  background: #fff;
}
.test-02 {
  color: red;
}




CSS Guards

가드는 또한 CSS 선택자에 응용될 수 있습니다.

css 선택자 또는 믹스인을 선언한 후 가드를 한 후 그것을 호출하는 것입니다.


다음은 믹스인 정의후 가드를 작성한 후 호출하는 예제입니다.

less
@my-option: true;
// 믹스인 정의
.my-optional-style() when (@my-option = true) {
	button {
		color: white;
	}
}
.my-optional-style();
컴파일된 css
button {
  color: white;
}


다음은 CSS 선택자 바로 뒤에 가드를 작성한 것입니다.

less
.my-optional-style when (@my-option = true) {
	button {
		color: white;
	}
}
.my-optional-style;
컴파일된 css
.my-optional-style button {
  color: white;
}


& 를 조합하여 다음과 같이 사용하면 다수의 가드 그룹을 만들 수 있도록 해줍니다.

less
@my-option: true;

// 가드 그룹을 만든다
& when (@my-option = true) {
	button {
		color: white;
	}
	a {
		color: blue;
	}
}
컴파일된 css
button {
  color: white;
}
a {
  color: blue;
}



Jaehee's WebClub


'StyleSheet > LESS' 카테고리의 다른 글

LESS Loops & Merge  (0) 2016.09.29
Import Directives & Options  (0) 2016.09.29
LESS Parent Selector(&)  (0) 2016.09.29
LESS Extend  (0) 2016.09.29
Mixins as Functions & Passing Rulesets to Mixins  (0) 2016.09.29