SASS 기본 매개 변수를 사용하기위한 실용적인 팁

Sass는 매개 변수를 수용하는 기능과 믹스 인을 제공합니다. SASS 기본 매개 변수를 사용할 수 있습니다. 즉, 매개 변수는 함수 또는 mixin을 호출 할 때 제공되지 않더라도 값이 있습니다.

Mixin에 집중합시다. 이것은 Mixin의 구문입니다.

 <code>@mixin foo($a, $b, $c) { // 我可以在此处使用$a、$b 和$c，但存在它们为空的风险} .el { @include foo(1, 2, 3); // 如果我尝试执行`@include foo;` // ... 这也是有效的语法... // 我会从Sass 获取`Error: Missing argument $a.` 错误}</code>

SASS 믹스에서 기본 매개 변수 설정은 더 안전하고 유용합니다.

 <code>@mixin foo($a: 1, $b: 2, $c: 3) { } .el { // 现在这样就可以了@include foo; // 我也可以传入参数@include foo("three", "little", "pigs"); }</code>

그러나 $ B와 $ C를 전달하고 싶지만 $ A를 SASS 기본 매개 변수로 남겨두면 어떻게됩니까? 요정은 이름이 지정된 매개 변수로 전달되는 것입니다.

 <code>@mixin foo($a: 1, $b: 2, $c: 3) { } .el { // 只传入第二个和第三个参数，$a 将为默认值。 @include foo($b: 2, $c: 3); }</code>

SASS 기본 매개 변수를 사용하는 실제 예

다음은 매우 기본적인 스타일 스크롤 바에 필요한 것을 출력하는 빠른 혼합입니다 (Kitty도 하나).

 <code>@mixin scrollbars( $size: 10px, $foreground-color: #eee, $background-color: #333 ) { // 适用于Google Chrome &::-webkit-scrollbar { width: $size; height: $size; } &::-webkit-scrollbar-thumb { background: $foreground-color; } &::-webkit-scrollbar-track { background: $background-color; } // 标准版本（目前仅适用于Firefox） scrollbar-color: $foreground-color $background-color; }</code>

이제 나는 이것을 다음과 같이 부를 수 있습니다.

 <code>.scrollable { @include scrollbars; } .thick-but-otherwise-default-scrollable { // 我可以跳过$b 和$c，因为它们是第二个和第三个参数@include scrollbars(30px); } .custom-colors-scrollable { // 如果所有其他参数都是命名的，我可以跳过第一个参数。 @include scrollbars($foreground-color: orange, $background-color: black); } .totally-custom-scrollable { @include scrollbars(20px, red, black); }</code>

나는 그것을 알아 내기 위해 검색해야했기 때문에 이것을 알아 차렸다. 나는 첫 번째 인수로 빈 줄이나 null로 "건너 뛰기"하려고했지만 이것은 작동하지 않습니다. 명명 된 매개 변수 메소드를 사용해야합니다.

위 내용은 SASS 기본 매개 변수를 사용하기위한 실용적인 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!