LESS의 함수

이 강의에서는 함수를 사용하는 방법을 살펴보겠습니다. 함수는 믹스인과 어느 정도 유사하지만, 값을 변경할 수 있는 매개변수를 추가할 수 있습니다.

이 매개변수는 함수의 괄호 안에 전달됩니다. 예제를 통해 살펴보겠습니다.

글꼴 크기를 설정하는 fs 함수를 만들어 봅시다. 크기를 매개변수로 전달하도록 합시다. 매개변수는 함수를 선언할 때 우리가 정한 이름을 가진 변수가 될 것입니다:

styles.less.fs(@size) {
  // 여기에 함수 코드가 들어갑니다
}

함수 내부에 매개변수 값이 삽입될 위치를 지정해 봅시다:

styles.less.fs(@size) {
  font-size: @size;
}

원하는 요소 크기를 매개변수로 전달하여 우리 함수를 호출해 봅시다:

styles.lessp {
  .fs(20px);
}

결과적으로 컴파일 후 단락의 글꼴 크기는 지정된 값과 같아집니다:

styles.cssp {
  font-size: 20px;
}