본문으로 바로가기

LESS Parametric Mixins

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

인자를 가지는 믹스인

지난 포스팅에서는 기본적인 믹스인에 대해 알아보았습니다.

이 글에서는 인자를 이용한 믹스인과 그외 믹스인 용법에 대해 계속 알아보도록 하겠습니다.





Parametric Mixins

LESS에는 특별한 유형의 룰셋이 있습니다. 

믹스인은 인자를 취할 수 있기 때문에 믹스인을 호출할 경우에 인자를 전달할 수 있습니다. 

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

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

그리고 우리는 다음과 같이 인자를 전달함으로서 호출할 수 있습니다

less
#header {
 .border-radius(4px); // 4px 전달
}
.button {
 .border-radius(6px); // 6px 전달
}
컴파일된 css
#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}


인자를 지니는 믹스인은 또한 그 매개 변수의 기본 값을 정의할 수 있습니다.

less
.border-radius(@radius: 5px) { // 여기서는 기본값 5px을 전달
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius; // 인자를 전달하지 않고 호출
}
컴파일된 css
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

인자를 전달하지 않더라도 믹스인에 기본 값을 정의해 놓았기 때문에 기본 값으로 출력되어 나타납니다.


그리고 파라미터를 취하지 않는 파라미터 믹스인을 사용할 수 있습니다.

이것은 CSS의 출력에서​​ 믹스인 룰셋을 숨길 때(컴파일하지 않음) 유용할 수 있습니다.

less
.wrap() { // () 안에 인자를 취하지 않음
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }
컴파일된 css
pre {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

위와 같이 정의된 믹스인은 출력되지 않고 믹스인을 호출하는 경우에만 출력됩니다.



Mixins with Multiple Parameters

믹스인은 여러 매개 변수를 사용할 수 있으며 매개변수 분리는 세미콜론(;) 또는 쉼표(,)를 작성하여 여러 매개변수를 구분 작성합니다.

일반적으로 세미콜론을 사용하는 것이 좋습니다. 쉼표 기호는 이중 의미를 가지고 있습니다.

쉼표는 매개변수들 각각의 구분과 CSS 속성값들은 구분자(margin: 2px, 4px, 6px, 8px; )로 해석될 수 있습니다.

그래서 믹스인 구분자로 쉼표를 사용하는 것은 인자로 구분된 목록을 만들 수 없을 수도 있습니다.

다른 한편으로, 컴파일러는 믹스인 호출 또는 선언(정의)에 적어도 하나의 세미콜론을 보면 한편 그것은 인자가 세미콜론으로 구분되어있는 것을 전제로하고 모든 콤마는 CSS 리스트에 속하게 합니다.

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

less
.mixin(@color; @padding: 2px) {
	color: @color;
	padding: @padding;
}
.mixin(@color; @padding; @margin: 2px) {
	color-3: @color;
	padding: @padding;
	margin: @margin @margin @margin @margin;
}
.some .selector div {
	.mixin(#008000);
}
.some .selector h1 {
	.mixin(red; 5px 10px; @margin:3px)
}
.some .selector p {
	.mixin(blue, 7px 10px 4px, @margin:10px)
}
컴파일된 css
.some .selector div {
  color: #008000;
  padding: 2px;
}
.some .selector h1 {
  color-3: red;
  padding: 5px 10px;
  margin: 3px 3px 3px 3px;
}
.some .selector p {
  color-3: blue;
  padding: 7px 10px 4px;
  margin: 10px 10px 10px 10px;
}



Named Parameters(이름있는 인자들)

믹스인의 참조는 위치 대신에 이름으로 유연한 인자값들을 제공할 수 있습니다.

어느 인자는 특별한 순서없이 이름으로 참조될 수 있습니다. 

less
.namePara(@color: black; @margin: 10px; @padding: 20px) {
	color: @color;
	margin: @margin;
	padding: @padding;
}
.demo-01 {
	.namePara(@margin: 20px; @color: #33acfe);
}
.demo-02{
	.namePara(#efca44; @padding: 40px);
}
컴파일된 css
.demo-01 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.demo-02 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}



The @arguments Variable

@arguments는 믹스인 안에서 특별한 의미가 있습니다. 

믹스인을 호출할 때, @arguments는 넘겨받은 인자를 모두 가지고 있습니다. 

인자들을 개별적으로 다루는 경우가 아니라면, 매우 유용하게 사용할 수 있습니다.

less
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}
컴파일된 css
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}



Advanced Arguments and the @rest Variable(고급인자와 @rest 변수처리)

믹스인 선언에 ... 을 사용할 경우 가변 수의 인자를 취할 수 있습니다.

변수 이름 뒤에 ... 사용하면 변수에 그 인수를 할당합니다.

less
.mixin(...) {        // 0-N 까지의 수를 일치 }
.mixin() {           // 정확히 0 인수를 일치  }
.mixin(@a: 1) {      // 0-1 인수를 일치 }
.mixin(@a: 1; ...) { // 0-N 까지의 수를 일치 }
.mixin(@a; ...) {    // 1-N 인수를 일치 }

.mixin() { 

이렇게 정의하면 전달인자를 못 받고 

.mixin(...) { 

로 정의하면 전달인자가 없어도 되고 다수 있어도 모두 처리하고 

.mixin(@a: 1) { 

이렇게 정의하면 초기 값이 1이니 인자를 전달하지 않아도 되고, 전달하면 그것이 변수 @a 값이 될 것이고 

.mixin(@a: 1; …) { 

이렇게 쓰면 위에서 설명한 것 처럼 인자를 몇 개든 받을 수 있다는 것을 말하는데 

.mixin(@a; …) { 

이렇게 쓸 경우엔 첫번째 인자는 반드시 받아야 합니다. 

하지만 문제가 나머지 인자를 나타내는 변수가 없어 나머지 인자를 지칭할 수 없어 제어가 힘들어 질 수 있습니다. 


less
.mixin(@a; @rest...) {
   // @rest 는 @a 변수뒤에 있는 인자들을 한데 묶어주는 것
   // @arguments 는 모든 인자를 묶어주는 것
}


자바스크립트의 경우 함수 내부에서 arguments 키워드를 통해 전달인자(유사 배열)를 참조할 수 있습니다. 

위에서 설명했듯이 LESS도 @arguments 참조 키워드가 있어 이를 사용하면 사용자가 전달한 모든 인자를 참조할 수 있습니다. 

거기에 한술 더 떠 @rest 변수를 처리하여 첫번째 인자를 제외한 나머지 인자를 참조할 수 있게 만들어 놓은 것입니다. 

결론은 @rest(나머지 변수들)를 사용하면 믹스인 정의할 경우 제작자가 정의한 인자 @a를 제외한 나머지 인자를 참조하는 키워드 @rest를 통해 사용자가 전달한 인자를 확인하여 처리할 수 있을 것입니다. 

그리고 더 나아가 좀더 활요하면 사용자가 어떤 값을 던졌는지 반복문을 통해 확인하여 개별 조건에 맞춰 코드를 분기하여 처리할 수도 있을 것입니다.


less
.mixin-01(@listofvariables...) {
	p: @listofvariables;
}
p {
	.mixin-01(one; two; three);
}

.mixin-02(@a; ...) {
	color: @a;
}
.mixin-02(@a) {
	background-color: contrast(@a);
	width:100%;
}
.mixin-02(@a; @b;) {
	background-color: contrast(@a);
	width:@b;
}

div {
	.mixin-02(red);
}
div.small {
	.mixin-02(red,50%);
}

.rest-mixin(@color, @padding...) {
	color: @color;
	padding: @padding;
}
.rest-class {
	.rest-mixin(red; 10px; 20px; 5px; 5px);
}

.mixin-03(...) {
	color: @arguments;
	background-color: @arguments;
}
.demo-01 {
	.mixin-03(red, blue)
}
컴파일된 css
div {
	.mixin-02(red);
}
div.small {
	.mixin-02(red,50%);
}

.rest-mixin(@color, @padding...) {
	color: @color;
	padding: @padding;
}
.rest-class {
	.rest-mixin(red; 10px; 20px; 5px; 5px);
}

.mixin-03(...) {
	color: @arguments;
	background-color: @arguments;
}
.demo-01 {
	.mixin-03(red, blue)
}



Pattern-matching(패턴 매칭)

가끔은 사용자는 전달한 매개변수에 따라 믹스인의 동작을 변경하고 싶을 수 있습니다.

mixin이 @switch에 따라서 다른 행동을 하고 싶은 상황에 대해 살펴 봅시다. 

.pattern-mixin 을 다음처럼 정의하면 됩니다. 

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

less
.pattern-mixin (dark, @color) {
	color: darken(@color, 10%);
}
.pattern-mixin (light, @color) {
	color: lighten(@color, 10%);
}
.pattern-mixin (@_, @color) {
	display: block;
}

@switch: light;

.pattern-matching {
	.pattern-mixin(@switch, #888);
}
컴파일된 css
.pattern-matching {
  color: #a2a2a2;
  display: block;
}

.mixin에 색상을 넘겨준 곳에는, 색상이 밝아졌습니다. 

만약 @switch의 값이 dark인 경우에는 색상이 CSS에 어두운 색상으로 출력될 것입니다.

위와 같은 결과가 나온 것은 :

  • 첫번째 믹스인 정의에는 동작하지 않습니다. 왜냐하면 첫번째 인자로 dark가 올거라고 예상했기 때문입니다.
  • 두번째 정의에서는 동작합니다. 왜냐하면 인자로 @switch가 light로 선언되어 있기 때문입니다.
  • 세번째 정의도 동작합니다. 왜냐하면 어떤 값이 인자로 와도 상관없기 때문입니다.


들어맞는 믹스인 정의만 사용됩니다. 

변수가 들어맞으면, 값이 무엇인지에 관계없이 연결(bind)됩니다. 

변수가 아닌 경우에는, 자신과 똑같은 것 하고만 들어맞습니다.


인자의 개수에 대해서도 들어맞는지 확인할(match) 수 있습니다. 

다음의 코드를 봅니다.

less
.pattern-match (@a) {
	color: @a;
}
.pattern-match (@a, @b) {
	color: fade(@a, @b);
}

.matching-01 {
	.pattern-match(hsl(90, 90%, 50%))
}
.matching-02 {
	.pattern-match(#ccc, 10%)
}
컴파일된 css
.matching-01 {
  color: #80f20d;
}
.matching-02 {
  color: rgba(204, 204, 204, 0.1);
}



Jaehee's WebClub


저작자표시 변경금지

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

LESS Extend  (0) 2016.09.29
Mixins as Functions & Passing Rulesets to Mixins  (0) 2016.09.29
LESS 변수 & 믹스인(Mixins)  (2) 2016.09.29
LESS 변수  (0) 2016.09.29
LESS Syntax 시작하기  (0) 2016.09.29
댓글 , 엮인글
Web Club
블로그 이미지 jaiyah 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바