5. Sass -At-rules (@-규칙) @function

함수를 사용하면 스타일시트 전체에서 재사용할 수 있는 SassScript 값에 대한 복잡한 연산을 정의할 수 있습니다. 그들은 읽기 쉬운 방식으로 일반적인 공식과 행동을 쉽게 추상화합니다.

함수는 @function <이름>(<인수들...>)로 작성된 @function @-규칙을 사용하여 정의됩니다. 함수의 이름은 임의의 Sass 식별자일 수 있습니다. 함수 호출의 결과로 사용할 값을 나타내는 @return @-규칙 뿐만 아니라 범용 문도 포함할 수 있습니다. 함수들은 일반 CSS 함수 구문을 사용하여 호출됩니다.

💡 재미있는 사실:
함수 이름은 모든 Sass 식별자와 마찬가지로 하이픈(-)과 언더스코어()를 동일하게 처리합니다. 이것은 scale-color와 scale_color가 모두 동일한 함수를 참조한다는 것을 의미합니다. 이것은 식별자 이름에 언더스코어()만 허용했던 Sass의 아주 초기부터의 역사적인 보류입니다. Sass가 CSS의 구문과 일치하도록 하이픈(-)에 대한 지원을 추가하자, 이 둘은 마이그레이션을 더 쉽게 하기 위해 동등하게 만들어졌습니다.

⚠️ 주의!
기술적으로 기능이 전역 변수 설정과 같은 부작용을 일으키는 것은 가능하지만, 이는 강력히 권장되지 않습니다. 부작용을 위해 믹스인을 사용하고 값을 계산하는 데만 함수를 사용하세요.

인수

인수를 사용하면 함수가 호출될 때마다 함수의 동작을 커스텀할 수 있습니다. 인수는 @function 규칙에서 함수 이름 뒤에 괄호로 둘러싸인 변수 이름 목록으로 지정됩니다. 함수는 SassScript 표현식의 형식으로 인수와 동일한 개수로 호출되어야 합니다. 이러한 표현식의 값은 함수의 몸체 내에서 해당 변수로 사용할 수 있습니다.

💡 재미있는 사실:
인수 목록에는 마지막 쉼표도 포함될 수 있습니다! 이렇게 하면 스타일시트를 리팩토링할 때 구문 오류를 쉽게 방지할 수 있습니다.

선택적 인수

일반적으로 함수가 선언하는 모든 인수는 함수가 포함될 때 전달되어야 합니다. 그러나 인수가 전달되지 않을 경우 사용할 기본값을 정의하여 인수를 선택적으로 만들 수 있습니다. 기본값은 변수 선언과 동일한 구문인 변수 이름, 콜론 및 SassScript 표현식을 사용합니다. 이를 통해 단순하거나 복잡한 방식으로 사용할 수 있는 유연한 기능 API를 쉽게 정의할 수 있습니다.

💡 재미있는 사실:
기본값은 임의의 SassScript 표현식일 수 있으며 이전 인수를 참조할 수도 있습니다.

키워드 인수

함수가 호출될 때 인수는 인수 목록의 위치에 따라 전달될 뿐만 아니라 이름으로도 전달될 수 있습니다. 이는 여러 개의 선택적 인수가 있는 함수 또는 이름 없이 의미가 명확하지 않은 boolean 인수에 특히 유용합니다. 키워드 인수는 변수 선언 및 선택적 인수와 동일한 문법을 사용합니다.

⚠️ 주의!
모든 인수는 이름으로 전달될 수 있으므로 함수의 인수 이름을 바꿀 때 주의하십시오. 사용자가 손상될 수 있습니다! 이전 이름을 선택적 인수로 잠시 유지하고 누군가 통과하면 경고를 인쇄하여 새 인수로 마이그레이션하는 것이 도움이 될 수 있습니다.

임의의 인수 사용하기

함수가 임의의 개수의 인수를 취할 수 있는 것이 유용할 때가 있습니다. @function 선언의 마지막 인수가 ...로 끝나는 경우, 해당 함수에 대한 모든 추가 인수가 목록으로써 해당 인수에 전달됩니다. 이 인수를 인수 목록이라고 합니다.

임의의 키워드 인수 사용하기

인수 목록은 또한 임의 키워드 인수를 갖는데 사용될 수 있습니다. meta.keywords() 함수는 인수 목록을 갖고 인수 이름($ 포함)에서 해당 인수의 값으로 맵으로써 함수에 전달된 추가 키워드를 반환합니다.

💡 재미있는 사실:
meta.keywords() 함수에 인수 목록을 전달하지 않으면 해당 인수 목록은 추가 키워드 인수를 허용하지 않습니다. 이렇게 하면 함수 호출자가 실수로 인수 이름의 철자를 틀리지 않았는지 확인할 수 있습니다.

임의의 인수 전달하기

인수 목록을 통해 함수가 임의의 위치 또는 키워드 인수를 가질 수 있는 것처럼, 동일한 문법을 사용하여 위치 및 키워드 인수를 함수에 전달할 수 있습니다. 함수 호출의 마지막 인수로 ... 뒤에 목록을 전달하면 해당 요소는 추가 위치 인수로 처리됩니다. 마찬가지로 ... 뒤에 오는 맵도 추가 키워드 인수로 처리됩니다. 여러분은 두 개를 동시에 전달할 수도 있습니다!

???

@return

@return @-규칙은 함수 호출의 결과로 사용할 값을 나타냅니다. @function 몸체 내에서만 허용되며, 각 @function은 @return으로 끝나야 합니다.

@return이 발생하면 함수를 즉시 종료하고 결과를 반환합니다. 빠른 반환은 엣지 케이스 또는 전체 함수를 @else 블록으로 래핑하지 않고 더 효율적인 알고리즘을 사용할 수 있는 경우를 처리하는 데 유용할 수 있습니다.

다른 함수

사용자 정의 함수 외에도 Sass는 항상 사용할 수 있는 내장 함수의 상당한 코어 라이브러리를 제공한다. Sass 구현은 또한 호스트 언어에서 커스텀 함수를 정의할 수 있게 한다. 그리고 물론, 당신은 언제나 기본 CSS 함수(심지어 이상한 구문을 가진 함수도)를 호출할 수 있다.

기본 CSS 함수

사용자 정의 함수나 내장 함수가 아닌 함수 호출은 일반 CSS 함수로 컴파일됩니다(Sass 인수 문법을 사용하지 않는 한). 인수는 CSS로 컴파일되어 함수 호출에 있는 그대로 포함됩니다. 이를 통해 Sass는 새로운 것이 추가될 때마다 새로운 버전을 출시할 필요 없이 모든 CSS 기능을 지원할 수 있습니다.

⚠️ 주의!
알려지지 않은 함수는 CSS로 컴파일되기 때문에 함수 이름을 입력할 때 놓치기 쉽습니다. 이러한 상황이 발생할 때 알림을 받기 위해 스타일시트의 출력에서 CSS 린터를 실행하는 것을 고려하세요!

💡 재미있는 사실:
calc()와 element()와 같은 일부 CSS 함수는 특이한 문법을 갖는다. Sass는 특히 따옴표가 없는 문자열로 이러한 함수를 특별히 구문 분석합니다.