Sass(SCSS) At-Rules #3[@function]

함수(function)

함수를 사용하면 스타일시트 전체에서 재사용할 수 있는 SassScript 값에 대한 복잡한 연산을 정의할 수 있습니다.

• function 구문

    @function <name> (<arguments...>){...}

함수(function)은 유니버셜 명령문 뿐만 아니라 함수 호출의 결과로 사용할 값을 나타내는 return문도 포함할 수 있습니다. 함수는 일반적인 CSS 함수 구문을 사용하여 호출합니다.

• Scss

    // 함수 정의
    @function pow($base, $exponent) {
        $result: 1;
        @for $_ from 1 through $exponent {
            $result: $result * $base;
        }
        @return $result;
        }
  
        .sidebar {
        float: left;
        // 함수 호출
        margin-left: pow(4, 3) * 1px;
        }
    }

• CSS

    .sidebar {
        float: left;
        margin-left: 64px;
    }

함수 이름 또한 하이픈과 밑줄을 동일하게 취급합니다. scale-color과 scale_color 둘 다 동일한 기능을 나타냅니다.

---

매개변수(Arguments)

선택적 매개변수(Optional Arguments)

• Scss

    @function invert($color, $amount: 100%) {
        $inverse: change-color($color, $hue: hue($color) + 180);
        @return mix($inverse, $color, $amount);
        }
  
        $primary-color: #036;
        .header {
        background-color: invert($primary-color, 80%);
        }
    }

• CSS

    .header {
    background-color: #523314;
    }

키워드 매개변수(Keyword Arguments)

• Scss

    $primary-color: #036;
    .banner {
        background-color: $primary-color;
        color: scale-color($primary-color, $lightness: +40%);
    }

• CSS

    .banner {
        background-color: #036;
        color: #0a85ff;
    }

임의의 매개변수 가져오기(Taking Arbitrary Arguments)

• Scss

    @function min($numbers...) {
        $min: null;
        @each $number in $numbers {
            @if $min == null or $number < $min {
            $min: $number;
            }
        }
        @return $min;
        }
  
        .micro {
        width: min(50px, 30px, 100px);
        }
    }

• CSS

    .micro {
        width: 30px;
    }

임의의 매개변수 전달(Passing Arbitrary Arguments)

• Scss

    $widths: 50px, 30px, 100px;
    .micro {
        width: min($widths...);
    }

• CSS

    .micro {
        width: 30px;
    }

---

@return

return은 함수 호출의 결과로 사용할 수 있는 값을 나타냅니다. 함수 바디 안에서만 허용됩니다. 함수가 호출되며 함수 바디 안의 코드를 실행하는데, 도중 return을 만나면 즉시 함수를 끝내고 결과를 반환합니다.

• Scss

    @function str-insert($string, $insert, $index) {
        // Avoid making new strings if we don't need to.
        @if str-length($string) == 0 {
            @return $insert;
        }
  
        $before: str-slice($string, 0, $index);
        $after: str-slice($string, $index);
        @return $before + $insert + $after;
    }

---

기타(Other Functions)

Sass는 사용자 정의 함수 외에도 항상 사용할 수 있는 내장 함수의 핵심 라이브러리를 제공합니다. 또한 호스트 언어로 사용자 정의 함수를 정의할 수 있게 합니다. 평범한 CSS 함수를-이상한 구문 일지라도- 호출할 수 있게 합니다.