SASSミキシンと機能の入力の検証

コアポイント

SASSミクシンと機能の入力の検証が不可欠であり、着信コードが正しいデータ型と形式であることを確認し、エラーやバグを防ぎ、コードのデバッグとメンテナンスを容易にします。
SASSは、
• 、type-of()、unit()などの入力検証用の組み込み関数を提供します。これらの関数は、入力データのタイプと単位を確認するために使用でき、入力が予想される基準を満たしていない場合はエラーがスローされます。 unitless() より複雑な検証チェックのために、
カスタム検証関数をSASSに作成できます。これには、
• ディレクティブを使用して新しい関数を定義し、@functionディレクティブを使用して検証チェックに基づいて値を返すことが含まれます。 @return
SASSミクシンまたは関数の入力検証が失敗した場合、エラーがスローされ、SASSコードの編集が停止します。
• ディレクティブを使用して、カスタムエラーメッセージをスローし、エラーの性質とエラーの修正方法に関する詳細情報を提供できます。 @error

SASSを書いて他の人がそれを使用するとき、彼らはあなたのコードを使用している間にエラーを犯す可能性があります。実際、正直なところ、SASSを書いて数日（または数時間後）に使用すると、自分のコードで間違いを犯します。あなたもそうかもしれません。幸いなことに、SASSには、私たちが書いたSASSに入れた入力開発者を検証するのに役立つ多くの機能があります。

これらのテクノロジーは、SASS Mixinを共有したり、スターターキットやミックスインと機能のセットを維持したりするチームに特に役立ちます。開発者は、共有SASSライブラリを使用する場合に2つのオプションがあります。カスタムミックスヘルプのヘルプのために、電子メール、チャット、Ping、またはその他の方法で互いに互いに違反することができます。 （この時点で、それはSASSの問題だけではありません。共有コードは、割り込みやドキュメントを介して通信する必要があります。）次に、SASS検証の最も有用な方法のいくつかを学びましょう。

単一の値を確認します

混合と関数はパラメーターを取ります。コードを職場の他の開発者に渡すか、オープンソースライブラリを公開する場合、パラメーターが意図に一致することを確認する必要があります。これらの関数は、パラメーターの変数を検証するのに役立ちます。

変数が存在することを確認してください：

variable-exists()

関数またはミックスインが開発者定義の変数に依存している場合、適切な

関数を使用して、変数が存在することを確認します。この関数は、変数が作成および定義されているかどうかに基づいて、trueまたはfalsを返します。 variable-exists()

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

ただし、開発者に頼ってグローバル変数を正しく設定するよりも優れたオプションは、これらのデフォルト変数をライブラリに含めることです。

チェック値のタイプ：

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

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

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

type-of()変数で表される値のタイプを知る必要がある場合は、

を使用してください。この関数は、次の文字列のいずれかを返します：

• 文字列
• color
• 番号
• bool
• null
• リスト
• Map

これは、特定の種類の入力を確認するのに役立ちます。開発者がサイズを作成するミックスインに値のみを渡すことを確認できます。

@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()

テーマの構成設定マップを作成するために開発者が必要な場合は、有効なマップがあることを確認できます。

// 你的插件：
$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` 是一个数字。";
  }
}

場合、関数またはミックスインの数学的操作には、パラメーターに特定の単位が必要です。

を使用して、値に正しい単位があることを確認できます。たとえば、ミキシンを使用して、ピクセルおよびREMユニットの寸法を作成できます。 （unit()このためのタスクでパッケージを実行する方が良いことに注意してください。ただし、SASSに保持する必要がある場合は、読み続けてください。

unit()リストとマップを確認します

変数にリストまたはマップが含まれていることを確認するために

@function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "确保你将有效的颜色传递给 color-fade() 函数。";
  }
}

を使用する方法を見てきました。また、2つの重要なことをテストすることもできます。値がリストにあるかどうか、キーがマップにあるかどうかです。

リスト内の値を見つける：

関数は、値がリストにあるかどうかを教えてくれます。技術的には、リスト（数）またはnullの値の位置を返します。それは真のブール機能ではありませんが、ここでの私たちの目的のために、真の誤った値で十分です。 type-of()

関数は、リストとリストにある値の2つのパラメーターを取ります。この関数は、混合物の特定の値の測定値をテストするのに役立ちます。 CSSトップ、右、下部、または左の速記を使用してパディングまたはマージンの計算を出力する混合物がある場合、初期、継承、自動などの値を計算しようとしないようにします。 index()

マップにキーがあることを確認してください：index()

マップ内の特定のキーをチェックしている場合は、index()関数を使用して、キーがチェックしているマップに存在することを確認できます。これは、

マッピングとメディアクエリMixinを使用する場合に非常に便利です。

@mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // 此处输出
  } @else {
    @warn "确保 `$settings` 是一个 Sass 映射。";
  }
}

map-has-key()混合物と関数を検証

map-has-key()既存のミックスインまたは機能、またはその他のSASSライブラリに依存するミックスインまたは機能を書くことがあります。 Breakpoint Sassライブラリに依存するために、前の例から$breakpointsMixinを更新しましょう。次のように拡張できます：

$rem-size: 16px !default;

@mixin px-rem($property, $value) {
  @if unit($value) == 'px' {
    #{$property}: $value;
    #{$property}: $value / $rem-size * 1rem;
  } @elseif unit($value) == 'rem' {
    #{$property}: $value * $rem-size / 1rem;
    #{$property}: $value;
  } @else {
    @warn "确保 `$value` 以 px 或 rem 为单位。";
  }
}

Mixin（より短く使用され、マッピングされた値を使用します）は、存在するときに

Mixinを使用します。そうでない場合、それは私たち自身のメディアクエリミックスコードに戻ります。

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@error 上記のコード例で気づいたかもしれないように、検証が誤った入力をキャプチャしたときに開発者に適切なフィードバックを提供することに注意を払いました。ほとんどの場合、私はを使用しました。このディレクティブは、開発者のコ​​ンソールにメッセージを送信しますが、コンパイラが実行を完了することができます。

時々、コンパイラを完全に停止する必要がある場合（特定の入力や関数がない場合、多くの出力が壊れます）、@warnを使用してメッセージをコンソールに送信してコンパイラを停止します。

@errorと

の違いの詳細については、このトピックに関する以前の記事またはSISSのSASSリファレンスの対応するセクションをチェックすることをお勧めします。

@warn@error結論

誰も完璧ではありません。コードを使用する人は、コードを数時間書いた後も自分自身ではありません。これが、Mixinと機能の入力を検証することにより、自分自身や他の人を支援することが非常に重要である理由です。これらの手法は、独自のコードをより効率的に使用するのに役立つだけでなく、チームがSASSライブラリを簡単に共有および維持することを可能にします。

SASSのエラーをどのように防止しますか？コメントでお知らせください！

SASS混合物と機能の入力の検証に関する

FAQ（FAQ） SASSミクシンと機能の入力を確認する目的は何ですか？

SASS Mixinと機能の入力の検証は、コードの整合性と機能を維持するために不可欠です。混合物と機能に渡されたデータ型が正しいことを確認するのに役立ち、予想される形式に適合します。これにより、コードのエラーやバグが防止され、より強力で信頼性が高くなります。また、入力データの問題をすばやく識別して修正できるため、コードがデバッグとメンテナンスを容易にします。 SASSミックスと機能の入力を確認するにはどうすればよいですか？

SASSは、ミックスインと機能の入力を検証するために使用できる組み込み関数をいくつか提供します。これらには、

、

、

などが含まれます。これらの関数を使用して、入力データのタイプと単位を確認できます。入力が予想される基準を満たしていない場合、エラーがスローされます。たとえば、

SASSでカスタム検証関数を作成できますか？

はい、SASSでカスタム検証関数を作成できます。これは、組み込み関数を使用して実装できない、より複雑な検証チェックを実行する必要がある場合に非常に便利です。カスタム検証関数を作成するには、@functionディレクティブを使用して新しい関数を定義するだけで、@returnディレクティブを使用して、検証チェックに基づいて値を返します。

SASS Mixinまたは機能で入力検証が失敗した場合はどうなりますか？

SASSミクシンまたは関数の入力検証が失敗した場合、エラーがスローされ、SASSコードの編集が停止します。これにより、入力データの問題を迅速に特定して修正し、最終的なCSS出力のバグやエラーを防ぐことができます。

SASS Mixinと機能のエラーを処理するにはどうすればよいですか？

SASSは@errorディレクティブを提供します。これは、入力検証が失敗したときにカスタムエラーメッセージをスローするために使用できます。これは、エラーの性質とそれを修正する方法に関する詳細情報を提供できるため、デバッグに特に役立ちます。

入力検証にSASS内省関数を使用できますか？

はい、SASS内省関数を入力検証に使用できます。これらの関数を使用すると、入力データのタイプ、ユニット、およびその他のプロパティを確認でき、入力が予想される基準を満たしていない場合にカスタムエラーメッセージをスローできる@errorディレクティブと併用できます。

SASSミクシンと機能の入力を検証するための一般的なユースケースは何ですか？

入力が、SASSミクシンと機能のさまざまなシナリオで使用できることを確認します。たとえば、ミックスインに渡された色の値が有効な色であること、または関数に渡された数字が正しいユニットを持っていることを確認することをお勧めします。入力検証は、特定のパラメーターが常に提供されること、または値が特定の範囲内にあることを確認するなど、コードの特定の制約またはルールを実施するために使用することもできます。

ミックスがSASSに存在するかどうかをテストできますか？

はい、mixin-exists()関数を使用して、混合物がSASSに存在するかどうかをテストできます。 Mixinが存在する場合、この関数はtrueを返し、それ以外の場合は偽りです。これは、コードのエラーを防ぐのに非常に役立ちます。これは、ミックスインが存在するかどうかを確認する前に、それを含める前にミックスインが存在するかどうかを確認できるためです。

SASSでの入力検証にunit()関数を使用するにはどうすればよいですか？

SASSの

関数は、数の単位を返します。この関数を入力検証で使用して、数値に正しいユニットがあるかどうかを確認できます。たとえば、ミックスインに渡された長さの値がピクセルであるか、関数に渡される時間が秒単位であることを確認することをお勧めします。 unit()

SASSミクシンと機能の入力を検証するためのベストプラクティスは何ですか？

以上がSASSミキシンと機能の入力の検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。