Sass Mixin 및 기능의 입력 검증-CSS 튜토리얼-php.cn

지시문과 함께 사용할 수 있으며 입력이 예상 기준을 충족하지 않을 때 사용자 정의 오류 메시지를 던질 수 있습니다.

집

웹 프론트엔드

CSS 튜토리얼

Sass Mixin 및 기능의 입력 검증

尊渡假赌尊渡假赌尊渡假赌

Feb 23, 2025 am 10:02 AM

Validating Input in Sass Mixins and Functions

코어 포인트

SASS MIXIN 및 기능에서 입력을 확인하는 것이 필수적이며, 들어오는 코드가 올바른 데이터 유형 및 형식이어서 오류 및 버그를 방지하고 코드를 디버깅하고 유지 관리 할 수 있도록합니다.

Sass는 입력 유효성 검사를위한 내장 기능을 제공합니다. 이러한 함수는 입력 데이터의 유형과 단위를 확인하는 데 사용될 수 있으며 입력이 예상 기준을 충족하지 않으면 오류가 발생합니다.

지시문을 사용하여 새 함수를 정의하고
Sass Mixin 또는 함수의 입력 검증이 실패하면 오류가 발생하고 SASS 코드의 컴파일이 중지됩니다. type-of() 지시문은 사용자 정의 오류 메시지를 던지는 데 사용하여 오류의 특성과 오류를 수정하는 방법에 대한 자세한 정보를 제공 할 수 있습니다. unit() unitless() Sass를 작성하고 다른 사람들이 사용할 때 코드를 사용하는 동안 오류가 발생할 수 있습니다. 사실, 솔직히, 내가 Sass를 쓰고 며칠 (또는 몇 시간 후)을 사용할 때, 나는 내 코드로 실수를합니다. 당신도 할 수도 있습니다. 다행히 Sass는 우리가 쓴 Sass에 넣은 입력 개발자를 확인하는 데 도움이되는 많은 기능을 가지고 있습니다.

이 기술은 Sass Mixin을 공유하거나 스타터 키트 또는 믹스 인 및 기능을 유지하는 팀에게 특히 유용합니다. 개발자는 공유 SASS 라이브러리를 사용할 때 두 가지 옵션을 가지고 있습니다. 이메일, 채팅, 핑 또는 사용자 정의 믹스 도움말을 통해 서로를 방해하거나 코드 검증이 포함 된 자세한 문서를 사용하여 서로 쉽게 제외 할 수 있습니다. (이 시점에서 SASS의 문제가 아닙니다. 공유 코드는 인터럽트 나 문서를 통해 통신해야합니다.) 이제 SASS 검증의 가장 유용한 방법을 배우겠습니다.

@function 단일 값을 확인하십시오 믹스 인과 기능은 매개 변수를 가져옵니다. 코드를 직장의 다른 개발자에게 전달하거나 오픈 소스 라이브러리를 게시하는 경우 매개 변수가 의도와 일치하는지 확인해야합니다. 이러한 함수는 매개 변수의 변수를 확인하는 데 유용합니다. @return 변수가 존재하는지 확인하십시오 :

기능 또는 MixIn이 개발자 정의 변수에 의존하는 경우 적절한 @error 기능을 사용하여 변수가 존재하는지 확인하십시오. 이 함수는 변수가 생성되고 정의되었는지 여부에 따라 true 또는 false를 반환합니다.

그러나 글로벌 변수를 올바르게 설정하기 위해 개발자에게 의존하는 것보다 더 나은 옵션은 이러한 기본 변수를 라이브러리에 포함시키는 것입니다.

체크 값 유형 :

변수로 표시되는 값의 유형을 알아야하는 경우

를 사용하십시오. 이 함수는 다음 문자열 중 하나를 반환합니다.

스트링
번호
null
지도

이것은 특정 유형의 입력을 확인하는 데 유용합니다. 개발자가 크기를 생성하는 Mixin에 값 만 전달하도록 할 수 있습니다.

를 사용하여 색상 믹스가 색상 만 처리 할 수 있습니다.

주제에 대한 구성 설정 맵을 만들기 위해 개발자가 필요한 경우 유효한 맵이 있는지 확인할 수 있습니다.

숫자를 확인하기위한 단위 : 때때로, 함수 또는 mixin에서의 수학적 작업에는 매개 변수의 특정 단위가 필요합니다.
를 사용하여 값에 올바른 단위가 있는지 확인할 수 있습니다. 예를 들어, 믹스 인을 사용하여 픽셀 및 REM 장치 치수를 만들 수 있습니다. (
는이 작업에 대한 패키지를 더 잘 실행하는 것이 좋습니다. 그러나 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;
}

로그인 후 복사

를 사용하는 방법을 보았습니다. 또한 값이 목록에 있는지 여부와 키가지도에 있는지 여부를 테스트 할 수 있습니다.

목록에서 값을 찾으십시오 <🎜 🎜> type-of() 함수는 값이 목록에 있는지 여부를 알려줍니다. 기술적으로, 목록 (숫자) 또는 null의 값의 위치를 반환합니다. 그것은 진정한 부울 함수는 아니지만, 우리의 목적을 위해 진실과 거짓 값이 충분합니다.

<🎜 🎜> <<> 함수는 목록과 목록에서 찾으려는 값의 두 매개 변수를 취합니다. 이 기능은 혼합에서 특정 값의 측정을 테스트하는 데 유용합니다. CSS 상단, 오른쪽, 하단 또는 왼쪽 속기를 사용하여 패딩 또는 마진 계산을 출력하는 믹스가있는 경우, 초기, 상속 또는 자동과 같은 값을 계산하려고하지 않으려는 것입니다.

// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}

로그인 후 복사

맵에 키가 있는지 확인하십시오 :

@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` 是一个数字。";
  }
}

로그인 후 복사

맵에서 특정 키를 확인하는 경우

기능을 사용하여 확인중인 맵에 키가 존재하는지 확인할 수 있습니다. <🎜 맵핑 및 미디어 쿼리 믹스를 사용하는 경우 : <🎜 쿼리를 사용하는 경우 매우 유용합니다. `unit()`

<<> 믹스와 함수를 확인하십시오 <🎜 🎜>

때때로 기존 믹스 또는 기능 또는 기타 SASS 라이브러리에 의존하는 믹스 또는 함수를 작성합니다. Breakpoint Sass 라이브러리에 의존하기 위해 이전 예제에서 <<> mixin을 업데이트합시다. 우리는 이것을 다음과 같이 확장 할 수 있습니다 : unit() 이제 우리의 <🎜 🎜> 믹스 인 (짧고 맵핑 된 값을 사용)은 존재할 때 <🎜 🎜> mixin을 사용합니다. 그렇지 않은 경우, 자체 미디어 쿼리 믹스 인 코드로 돌아갑니다.

<🎜 🎜>라는 일치 함수가 있습니다. 특정 함수가 존재하는지 테스트하는 데 사용할 수 있습니다. 비표준 기능에 의존하는 수학 작업이있는 경우 기능이 포함 된 라이브러리를 포함시켜야합니다. Compass는 지수 수학을위한 <<<<> 기능을 추가했습니다. 함수가 필요한 글꼴 크기 비율을 만들고 있다면 테스트하십시오.

function-exists() <🎜 🎜> <<>보고 질문 : <🎜 🎜> 및 <🎜 🎜> pow() 위의 코드 예제에서 알 수 있듯이 검증이 잘못된 입력을 캡처 할 때 개발자에게 좋은 피드백을 제공하는 데주의를 기울였습니다. 대부분의 경우

를 사용했습니다. 이 지침은 메시지를 개발자의 콘솔로 보내지 만 컴파일러가 실행을 완료 할 수 있습니다.

@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;
}

로그인 후 복사

때로는 컴파일러를 완전히 정지시켜야 할 때 (특정 입력이나 기능이없고, 많은 출력이 고장 나지 않으면) 를 사용하여 메시지를 콘솔로 보내고 컴파일러를 중지합니다.

와 @warn의 차이점에 대한 자세한 내용은이 주제에 대한 이전 기사 또는 SitePoint의 Sass 참조의 해당 섹션을 확인할 수 있습니다. @error 결론

아무도 완벽하지 않습니다. 우리의 코드를 사용하는 사람은 몇 시간 동안 코드를 작성한 후에도 자신이 아닙니다! 그렇기 때문에 Mixin과 기능의 입력을 검증하여 자신과 다른 사람들을 돕는 것이 매우 중요합니다. 이러한 기술은 자신의 코드를보다 효율적으로 사용하는 데 도움이 될뿐만 아니라 팀이 SASS 라이브러리를보다 쉽게 공유하고 유지 관리 할 수 있도록 도와줍니다.

Sass의 오류를 어떻게 방지합니까? 의견에 알려주십시오! @warn Sass Mixin의 입력 확인 및 기능 FAQS (FAQ) Sass Mixin에서 입력을 검증하는 목적은 무엇입니까?

Sass Mixin에서 입력 확인 및 기능은 코드의 무결성과 기능을 유지하는 데 필수적입니다. 혼합 및 기능으로 전달 된 데이터 유형이 정확하고 예상 형식을 준수하도록하는 데 도움이됩니다. 코드의 오류와 버그를 방지하여보다 강력하고 신뢰할 수 있습니다. 또한 입력 데이터의 모든 문제를 신속하게 식별하고 수정할 수 있으므로 코드를 더 쉽게 디버깅하고 유지 관리 할 수 있습니다.

Sass Mixin과 기능에서 입력을 어떻게 확인합니까? @error SASS는 Mixin 및 함수의 입력을 확인하는 데 사용할 수있는 몇 가지 내장 기능을 제공합니다. 여기에는 ,

및 등이 포함됩니다. 이러한 함수를 사용하여 입력 데이터의 유형과 단위를 확인할 수 있으며 입력이 예상 기준을 충족하지 않으면 오류가 발생합니다. 예를 들어,

함수를 사용하여 입력이 숫자인지 확인하고 오류가 발생하는지 확인할 수 있습니다. @warn SASS에서 사용자 정의 유효성 검사 함수를 만들 수 있습니까?

예, Sass에서 사용자 정의 검증 함수를 만들 수 있습니다. 이는 내장 기능을 사용하여 구현할 수없는보다 복잡한 검증 검사를 수행 해야하는 경우 매우 유용합니다. 사용자 정의 유효성 검사 함수를 만들려면

지시문을 사용하여 새 함수를 정의한 다음

지시문을 사용하여 유효성 검사를 기반으로 값을 반환하십시오. @function Sass Mixin 또는 기능에서 입력 유효성 검사가 실패하면 어떻게됩니까? @return Sass Mixin 또는 함수의 입력 유효성 검사가 실패하면 오류가 발생하고 SASS 코드의 컴파일이 중지됩니다. 이를 통해 입력 데이터의 모든 문제를 신속하게 식별하고 수정하고 최종 CSS 출력의 버그 및 오류를 방지 할 수 있습니다.

Sass Mixin과 기능에서 오류를 어떻게 처리합니까?