@mixin과 @include
믹스인을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일을 정의할 수 있습니다.
.float-left와 같은 비의미적 클래스를 사용하지 않고 라이브러리에서 스타일 컬렉션을 배포하는 것을 쉽게 합니다.
믹스인은 @mixin <이름> { ... } 또는 @mixin 이름(<인수...>) { ... }라고 쓰여진 @mixin @-규칙을 사용하여 정의된다. 믹스인의 이름은 임의의 Sass 식별자일 수 있으며 최상위 문 이외의 모든 문을 포함할 수 있습니다. 믹스인은 단일 스타일 규칙으로 떨어질 수 있는 스타일을 캡슐화하는 데 사용될 수 있으며, 다른 규칙에 중첩되거나 스타일시트의 최상위 수준에 포함될 수 있는 자체 스타일 규칙을 포함하거나, 변수를 수정하는 역할을 할 수 있습니다.
믹스인은 @include <이름> 또는 @include <이름>(<인수...>)로 작성된 @include @-규칙을 사용하여 현재 컨텍스트에 포함됩니다. 믹스인의 이름이 포함되어 있습니다.
💡재미있는 사실:
모든 Sass 식별자와 마찬가지로 믹스인 이름은 하이픈(-)과 언더스코어()을 동일하게 처리합니다. 이것은reset-list와reset_list가 모두 동일한 믹스인을 참조한다는 것을 의미합니다. 이것은 식별자 이름에 언더스코어()만 허용했던 Sass의 아주 초기부터의 역사적인 연장입니다. 언젠가 Sass가 CSS의 문법과 일치하도록 하이픈(-)에 대한 지원을 추가하자, 이 둘은 마이그레이션을 더 쉽게 하기 위해 동일하게 만들어졌습니다.
인수
믹스인은 또한 인수를 사용할 수 있으며, 인수는 믹스인이 호출될 때마다 그들의 행동을 커스텀할 수 있게 해줍니다. 인수는 괄호로 둘러싸인 변수 이름 목록으로 믹스인의 이름 뒤에 @mixin 규칙으로 지정됩니다. 그런 다음 믹스인은 SassScript 표현식의 형태로 동일한 수의 인수와 함께 포함되어야 합니다. 이러한 식의 값은 해당 변수로 믹스인의 몸 안에서 사용할 수 있습니다.
💡재미있는 사실:
인수 목록에는 뒤에 오는 쉼표도 포함될 수 있습니다! 이렇게 하면 스타일시트를 리팩토링할 때 구문 오류를 쉽게 방지할 수 있습니다.
선택적 인수(optional arguments)
일반적으로 믹스인이 선언하는 모든 인수는 해당 믹스인이 포함될 때 전달되어야 합니다. 그러나 인수가 전달되지 않을 경우 사용할 기본값(default value)을 정의하여 인수를 선택적으로 만들 수 있습니다. 기본값은 변수 선언과 동일한 구문인 변수 이름, 콜론 및 SassScript 표현식을 사용합니다. 이를 통해 단순하거나 복잡한 방식으로 사용할 수 있는 유연한 믹스인 API를 쉽게 정의할 수 있습니다.
💡재미있는 사실:
기본값은 임의의 SassScript 식일 수 있으며 이전 인수를 참조할 수도 있습니다.
키워드 인수
믹스인이 포함된 경우 인수는 인수 목록에서 해당 위치로 전달될 뿐만 아니라 이름으로도 전달될 수 있습니다. 이는 여러 개의 선택적 인수를 사용하거나 이름 없이 의미가 명확하지 않은 boolean 인수를 사용할 때 특히 유용합니다. 키워드 인수는 변수 선언 및 선택적 인수와 동일한 구문을 사용합니다.
⚠️주의!
모든 인수는 이름으로 전달될 수 있으므로, 믹스인의 인수 이름을 변경할 때 주의하십시오. 사용자가 손상될 수 있습니다! 이전 이름을 선택적 인수로 잠시 유지하고 누군가 통과하면 경고를 인쇄하여 새 인수로 마이그레이션하는 것이 도움이 될 수 있습니다.
임의 인수 사용하기
때때로 임의의 수의 인수를 수용할 수 있는 믹스인이 유용합니다. @mixin 선언의 마지막 인수가 ...로 끝나는 경우, 해당 믹스인에 대한 모든 추가 인수가 목록으로 해당 인수에 전달됩니다. 이 인수를 인수 목록이라고 합니다.
임의 키워드 인수 사용하기
인수 목록을 사용하여 임의 키워드 인수를 가져올 수도 있습니다. ㅊㅊmeta.keywords() 함수`는 인수 목록을 사용하고 인수 이름($ 제외)에서 해당 인수 값으로의 맵으로 믹스인에 전달된 추가 키워드를 반환합니다.
💡재미있는 사실:
meta.keywords() 함수에 인수 목록을 전달하지 않으면 해당 인수 목록에서 추가 키워드 인수를 허용하지 않습니다. 이렇게 하면 믹스인을 호출한 사람이 실수로 인수 이름의 철자를 틀리지 않았는지 확인할 수 있습니다.
임의 인수 전달하기
인수 목록을 통해 믹스인이 임의의 위치 또는 키워드 인수를 취할 수 있는 것처럼, 동일한 문법을 사용하여 위치 및 키워드 인수를 믹스인에 전달할 수 있습니다. ...뒤에 오는 목록을 포함한 마지막 인수로 전달하면 해당 요소는 추가 위치 인수로 처리됩니다. 마찬가지로 ...뒤에 오는 맵은 추가 키워드 인수로 처리됩니다. 두 개를 동시에 전달할 수도 있습니다!
💡재미있는 사실:
인수 목록은 위치 및 키워드 인수를 모두 추적하기 때문에 이를 사용하여 두 인수를 동시에 다른 믹스인으로 전달합니다. 이를 통해 믹스인에 대한 별칭을 매우 쉽게 정의할 수 있습니다!
컨텐트 블록(@content)
인수를 갖는 것 외에도, 믹스인은 컨텐트 블록으로 알려진 스타일의 전체 블록을 가질 수 있습니다. 믹스인은 본문에 @content @-규칙을 포함함으로써 콘텐츠 블록을 사용한다고 선언할 수 있습니다. 컨텐츠 블록은 Sass의 다른 블록과 마찬가지로 중괄호를 사용하여 전달되며 @content 규칙 대신 삽입됩니다.
💡재미있는 사실:
믹스인은 여러@content@-규칙을 포함할 수 있습니다. 이렇게 하면 각@content에 대해 컨텐츠 블록이 별도로 포함됩니다.
⚠️주의!
컨텐트 블록은 어휘적으로 범위가 지정되어 있으므로 믹스인이 포함된 범위의 지역 변수만 볼 수 있습니다. 콘텐츠 블록이 호출되기 전에 정의된 경우에도 전달된 믹스인에 정의된 변수를 볼 수 없습니다.
컨텐트 블록에 인수 전달하기
믹스인은 @content(<인수들...>)를 작성함으로써 다른 믹스인에 인수를 전달하는 것과 같은 방식으로 자신의 콘텐츠 블록에 인수를 전달할 수 있습니다. 콘텐츠 블록을 작성하는 사용자는 @include <이름> using (<인수들...>)를 작성하여 인수를 받아들일 수 있습니다. 콘텐츠 블록의 인수 목록은 믹스인의 인수 목록과 동일하게 작동하며, @content에 의해 전달된 인수는 믹스인에게 인수를 전달하는 것과 동일하게 작동합니다.
⚠️주의!
믹스인이 컨텐트 블록에 인수를 전달할 경우, 해당 컨텐츠 블록은 해당 인수를 수락함을 반드시 선언해야 합니다. 이것은 (이름보다는) 위치별로만 인수를 전달하는 것이 좋다는 것을 의미하며, 더 많은 인수를 전달하는 것이 변화를 깨뜨린다는 것을 의미합니다.
콘텐츠 블록에 전달하는 정보를 유연하게 조정하려면 필요한 정보가 포함된 맵으로 전달하는 것을 고려해 보십시오!
들여쓰기 믹스인 문법
들여쓰기 문법은 표준 @mixin과 @include 외에도 믹스인을 정의하고 사용하기 위한 특별한 문법을 가지고 있습니다. 믹스인은 = 문자를 사용하여 정의되며 +를 사용하여 포함됩니다. 비록 이 문법은 간결하지만, 한눈에 이해하기가 더 어려우며 사용자들이 그것을 피하도록 권장됩니다.
