Sass Mixin 및 기능의 입력 검증
- 尊渡假赌尊渡假赌尊渡假赌원래의
- 2025-02-23 10:02:10525검색
-
보다 복잡한 검증 검사를 위해 SASS에서 사용자 정의 검증 함수를 만들 수 있습니다. 여기에는
- 지시문을 사용하여 새 함수를 정의하고 지시문을 사용하여 확인 검사를 기반으로 값을 반환하는 것이 포함됩니다.
-
Sass Mixin 또는 함수의 입력 검증이 실패하면 오류가 발생하고 SASS 코드의 컴파일이 중지됩니다.
type-of()지시문은 사용자 정의 오류 메시지를 던지는 데 사용하여 오류의 특성과 오류를 수정하는 방법에 대한 자세한 정보를 제공 할 수 있습니다.unit()unitless()Sass를 작성하고 다른 사람들이 사용할 때 코드를 사용하는 동안 오류가 발생할 수 있습니다. 사실, 솔직히, 내가 Sass를 쓰고 며칠 (또는 몇 시간 후)을 사용할 때, 나는 내 코드로 실수를합니다. 당신도 할 수도 있습니다. 다행히 Sass는 우리가 쓴 Sass에 넣은 입력 개발자를 확인하는 데 도움이되는 많은 기능을 가지고 있습니다. -
@function단일 값을 확인하십시오믹스 인과 기능은 매개 변수를 가져옵니다. 코드를 직장의 다른 개발자에게 전달하거나 오픈 소스 라이브러리를 게시하는 경우 매개 변수가 의도와 일치하는지 확인해야합니다. 이러한 함수는 매개 변수의 변수를 확인하는 데 유용합니다. @return변수가 존재하는지 확인하십시오 : -
기능 또는 MixIn이 개발자 정의 변수에 의존하는 경우 적절한 @error기능을 사용하여 변수가 존재하는지 확인하십시오. 이 함수는 변수가 생성되고 정의되었는지 여부에 따라 true 또는 false를 반환합니다.
- 스트링 색상
- 번호 bool
- null 목록
- 지도
- 를 사용하여 색상 믹스가 색상 만 처리 할 수 있습니다.
-
주제에 대한 구성 설정 맵을 만들기 위해 개발자가 필요한 경우 유효한 맵이 있는지 확인할 수 있습니다.
숫자를 확인하기위한 - 를 사용하여 값에 올바른 단위가 있는지 확인할 수 있습니다. 예를 들어, 믹스 인을 사용하여 픽셀 및 REM 장치 치수를 만들 수 있습니다. ( 는이 작업에 대한 패키지를 더 잘 실행하는 것이 좋습니다. 그러나 Sass에 보관해야한다면 계속 읽으십시오. ) .
<code class="language-sass">@mixin create-font-size() {
@if variable-exists(base-font) {
font-size: $base-font;
} @else {
@error "请定义变量 `$base-font`。";
}
@if variable-exists(line-height) {
line-height: $line-height;
} @else {
@error "请定义变量 `$line-height`。";
}
}
// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
@include create-font-size;
}</code>를 사용하는 방법을 보았습니다. 또한 값이 목록에 있는지 여부와 키가지도에 있는지 여부를 테스트 할 수 있습니다.
type-of() 함수는 값이 목록에 있는지 여부를 알려줍니다. 기술적으로, 목록 (숫자) 또는 null의 값의 위치를 반환합니다. 그것은 진정한 부울 함수는 아니지만, 우리의 목적을 위해 진실과 거짓 값이 충분합니다.
<code class="language-sass">// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;
@mixin create-font-size() {
//等等...
}
// 开发者的代码：
$base-font: 16px;
p {
@include create-font-size();
}</code>
<code class="language-sass">@mixin size($height, $width: $height) {
@if type-of($height) == number {
height: $height;
} @else {
@warn "确保 `$height` 是一个数字。";
}
@if type-of($width) == number {
width: $width;
} @else {
@warn "确保 `$width` 是一个数字。";
}
}</code>
기능을 사용하여 확인중인 맵에 키가 존재하는지 확인할 수 있습니다. unit()
믹스와 함수를 확인하십시오
unit()
이제 우리의 믹스 인 (짧고 맵핑 된 값을 사용)은 존재할 때 mixin을 사용합니다. 그렇지 않은 경우, 자체 미디어 쿼리 믹스 인 코드로 돌아갑니다.
function-exists()
보고 질문 : 및 pow()
<code class="language-sass">@mixin create-font-size() {
@if variable-exists(base-font) {
font-size: $base-font;
} @else {
@error "请定义变量 `$base-font`。";
}
@if variable-exists(line-height) {
line-height: $line-height;
} @else {
@error "请定义变量 `$line-height`。";
}
}
// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
@include create-font-size;
}</code>
때로는 컴파일러를 완전히 정지시켜야 할 때 (특정 입력이나 기능이없고, 많은 출력이 고장 나지 않으면) 를 사용하여 메시지를 콘솔로 보내고 컴파일러를 중지합니다.
@warn의 차이점에 대한 자세한 내용은이 주제에 대한 이전 기사 또는 SitePoint의 Sass 참조의 해당 섹션을 확인할 수 있습니다. @error
결론
@warn
Sass Mixin의 입력 확인 및 기능 FAQS (FAQ)
@error
SASS는 Mixin 및 함수의 입력을 확인하는 데 사용할 수있는 몇 가지 내장 기능을 제공합니다. 여기에는 ,
위 내용은 Sass Mixin 및 기능의 입력 검증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 모듈 방법론 이해다음 기사：CSS 모듈 방법론 이해