함수 - 함수, 함수예제

1. 함수(Functions)

자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins은 거의 유사하지만 반환되는 내용이 다르다.

Mixin은 위에서 살펴본 대로 지정한 스타일(Style)을 반환하는 반면, 함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환한다.

// Mixins
@mixin 믹스인이름($매개변수) {
  스타일;
}

// Functions
@function 함수이름($매개변수) {
  @return 값
}

사용하는 방법에도 차이가 있다. 
Mixin은 @include 지시어를 사용하는 반면, 함수는 함수이름으로 바로 사용한다. 그리고 함수는 시작할때도 "@"을 사용하고 return할때도 "@"을 사용한다

// Mixin
@include 믹스인이름(인수);

// Functions
함수이름(인수)

함수는 특정한 지시어가 없이, 함수이름으로 사용한다. 

 

 

2. 함수예제

@function columns($number, $columns, $width){
    @return $width * ($number/$columns);
}

.container{
    $width: 1200px;
    width: $width;
    
    .item:nth-child(1){
        width: columns(1, 12, $width);
    }
    .item:nth-child(2){
        width: columns(8, 12, $width);
    }
    .item:nth-child(3){
        width: columns(3, 12, $width);
    }
}

.container {
  width: 1200px;
}
.container .item:nth-child(1) {
  width: 100px;
}
.container .item:nth-child(2) {
  width: 800px;
}
.container .item:nth-child(3) {
  width: 300px;
}

 

위의 소스코드를 해석하자면, 매개변수를 값을 받아오고 받아온값을 연산해서 반환하는것을 볼 수 있다.

하지만 매번 매개변수값을 일일이 입력하는것도 힘들 수 있다. 이것을 대비해서 이전시간에 배운 키워드 인수와 매개변수 초기값을 설정할 수 있다.

@function columns($number: 1, $columns: 12, $width: 1200px){
    @return $width * ($number/$columns);
}

.container{
    $width: 1200px;
    width: $width;
    
    .item:nth-child(1){
        width: columns(1, $width: $width);
    }
    .item:nth-child(2){
        width: columns(8, $width: $width);
    }
    .item:nth-child(3){
        width: columns(3, $width: $width);
    }
}

.container {
  width: 1200px;
}
.container .item:nth-child(1) {
  width: 100px;
}
.container .item:nth-child(2) {
  width: 800px;
}
.container .item:nth-child(3) {
  width: 300px;
}

초기값을 columns함수의 매개변수로 값을 지정해서 함수만 호출하더라도 값이 출력되게 할 수 있다. 또한 바꾸고 싶은 값이 있다면, 키워드 인수를 이용해서 값을 변경하면 된다.

 

@function columns($number: 1, $columns: 12, $width: 1200px){
    @return $width * ($number/$columns);
}

.container{
    $width: 1200px;
    width: $width;
    
    .item:nth-child(1){
        width: columns();
    }
    .item:nth-child(2){
        width: columns(8, $width: $width);
    }
    .item:nth-child(3){
        width: columns(3, $width: $width);
    }
}

.container {
  width: 1200px;
}
.container .item:nth-child(1) {
  width: 100px;
}
.container .item:nth-child(2) {
  width: 800px;
}
.container .item:nth-child(3) {
  width: 300px;
}

다음과 같이 아애 인자 없이도 매개변수로 초기값을 설정해놓았기 때문에 값이 잘 출력되는걸 알 수 있다.