@errorをsassで責任を持って使用します-CSSチュートリアル-php.cn

Using @error responsibly in Sass

キーポイント

SASSの@errorディレクティブは、問題が発生したときに著者の入力を制御し、エラーをスローするための強力なツールであり、コンパイラの障害を許可するよりも効果的です。
@errorをサポートしていないSASSの古いバージョンの場合、代わりに@warnディレクティブを使用できます。エラーが発生したときにコンパイラが引き続きクラッシュするようにするために、警告後にコンパイルエラーをトリガーするハイブリッドマクロを作成できます。
feature-exists('at-error')関数を使用して、@errorがサポートされているかどうかを確認できます。サポートされていない場合は、@warnディレクティブを使用してから、@returnステートメントなしで関数を使用してコンパイラをクラッシュさせます。
log関数は他の関数内で使用でき、logハイブリッドマクロを他の場所で使用できるため、責任を持ってエラーを投げかけます。これにより、SASSのさまざまなバージョンの効率的なエラー管理が可能になります。

Ruby Sass 3.4およびLibsass 3.1なので、ディレクティブを使用できます。このディレクティブは@errorに似ており、実行プロセスを終了し、現在の出力ストリーム（おそらくコンソール）にカスタムメッセージを表示するように設計されています。 @warn 言うまでもなく、この機能は、問題が発生したときに著者の入力を制御し、スローエラーを制御するために、いくつかのSASSロジックを含む機能と混合マクロを構築する場合に非常に便利です。これは、コンパイラを失敗させるよりも優れていることを認めなければなりませんよね？

すべてが良いです。 SASS 3.3がまだ広く使用されています。 SASS 3.2は、一部の場所でも使用されています。特に大規模なプロジェクトでは、SASSの更新は簡単ではありません。適切に機能しているものを更新するために時間と予算を費やすことが不可能な場合があります。これらの古いバージョンの場合、

は無意味であり、カスタム

と見なされます。これは、順方向の互換性の理由でSASSで完全に許可されています。 @error at-directiveこれは、最新のSASSエンジンのみをサポートすることを決定しない限り、

を使用できないことを意味しますか？まあ、あなたは方法があると想像することができますので、この投稿で。

@error

アイデアは何ですか？

アイデアはシンプルです。

をサポートする場合は、使用します。それ以外の場合は、

を使用します。 @errorは、コンパイラが実行を継続することを妨げませんが、コンパイラが完全にクラッシュするように、警告の後にコンパイルエラーをトリガーすることをお勧めします。楽しんでください、あなたはしばしば、ブリッドのない何かを破壊する必要はありません。 @warn @warnこれは、コンテンツ全体を混合マクロでラップする必要があることを意味します。次のように使用できます：

log(...)あなたは認めなければなりません、それはかっこいいですよね？わかりました、十分に自慢して、それを構築しましょう。

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

ログイン後にコピー

build logger

したがって、ハイブリッドマクロは、単なるラッパーであるため、または

とまったく同じように機能します。したがって、メッセージは1つのパラメーターのみが必要です。メッセージ。

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

ログイン後にコピー

@errorサポートをどのように確認するかを自問することができます。最初は、バージョンのスニッフィングを含む不器用なソリューションを思いつきましたが、それはひどいものでした。さらに、SASSコアデザイナーは、全体を考慮に入れた賢い人であるという事実を完全に見落とし、feature-exists(...)関数に導入し、関数がサポートされているかどうかを返しました。 at-error

<code>@mixin log($message) { ... }</code>

ログイン後にコピー

パッチ説明リーダーの場合、

関数はSASS 3.3でのみ導入されていることを知っているでしょう。 SASS 3.2をカバーしていません！ OK、その一部は本当です。 SASS 3.2では、feature-exists(...)真実feature-exists('at-error')文字列として評価されます。 を追加することにより、SASS 3.2がこの状態に入っていないことを確認し、バージョンに移動します。 == true @warnこれまでのところ、すべてがうまくいきました。警告後にコンパイルエラーをトリガーする必要がありますが。これをどのように行いますか？ SASSをクラッシュさせるには多くの方法がありますが、理想的には、認識できるものを手に入れたいと思っています。エリック・スザンヌは、以前にアイデアを思いつきました。

ステートメントのない関数を呼び出すだけで、クラッシュするのに十分です。このモードは、多くの場合、

noop @returnと呼ばれます。基本的に、これは何もしない空の関数です。 SASSの仕組みにより、コンパイラがクラッシュします。これはとても良いです！ この関数の最後のポイントとどのように呼びますか？ SASS関数は、特定の場所でのみ呼び出すことができます。いくつかの方法があります：

<code>@mixin log($message) {
  @if feature-exists('at-error') == true {
    @error $message;
  } @else {
    @warn $message;
  }
}</code>

ログイン後にコピー

ダミー変数、たとえば：

$_: noop() たとえば、
crash: noop()
@if noop() {}
を使用しないように警告したいと思います。 SASS 3.3では、SASS 3.2では問題ではないかもしれませんが、これにより、グローバル

noop

で使用すると意味があります。 NOOP関数のNOOP条件。 $_ $_ わかりました！前のコードでテストしてみましょう：

<code>@function noop() {}</code>

ログイン後にコピー

以下はlibsass：

です

<code>@mixin log($message) {
  @if feature-exists('at-error') == true {
    @error $message;
  } @else {
    @warn $message;
    // 由于函数不能在 Sass 中的任何地方调用，
    // 我们需要在一个虚拟条件中进行调用。
    @if noop() {}
  }
}</code>

ログイン後にコピー

以下はSASS 3.4：

です

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

ログイン後にコピー

以下はSASS 3.2と3.3です（ターミナルでこれらのバージョンを簡単にテストできないため、出力は大胆な推測です）：

<code>message:
path/to/file.scss
1:1  哎呀，你刚才的操作出了问题！
Details:
column: 1
line: 1
file: /path/to/file.scss
status: 1
messageFormatted: path/to/file.scss
1:1  哎呀，你刚才的操作出了问题！</code>

ログイン後にコピー

これはうまくいくようです！どのエンジンでも、古いエンジンでさえ、コンパイラが終了します。

をサポートするエンジンでは、すぐにエラーメッセージを受信します。これらのサポートされていないエンジンでは、彼らは警告としてメッセージを受け取り、NOOP機能のためにコンピレーションをクラッシュさせます。

<code>Error: 哎呀，你刚才的操作出了问题！
在 path/to/file.scss 的第 1 行，位于 `log` 中
使用 --trace 获取回溯。</code>

ログイン後にコピー

関数内のログを記録できるようにします@at-error

現在のセットアップの唯一の問題は、ハイブリッドマクロを構築したため、関数内からエラーをスローできないことです。混合マクロを関数内に含めることはできません（CSSコードを印刷する可能性があるため、SASS関数とは関係ありません）！

最初に混合マクロを関数に変換した場合はどうなりますか？この時点で、奇妙なことが起こりました：@errorはSASS 3.3-の有効な機能として認識されていないため、惨めに失敗します：at-directive

関数には、可変宣言と制御命令のみを含めることができます。

公平になるために。これは、サポートされていないエンジンが強制することなくクラッシュするため、NOOPハッキングはもう必要ないことを意味します。クラッシュする前にメッセージが著者のコンソールに印刷されるように、プロセスの上に

ディレクティブを配置する必要があります。

@warn

その後、ハイブリッドマクロを提供して、汚れたヌル条件やダミー変数ハックよりもフレンドリーなAPIを取得できます。

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

ログイン後にコピー

<code>@mixin log($message) { ... }</code>

ログイン後にコピー

最終的な考え

それだけです！これで、関数内で

関数を使用して（制限のため）、

ハイブリッドマクロを他の場所で使用して責任を持ってエラーを投げることができます。とてもきれいです！ log(...) ここに完全なコードがあります：（完全なコードの例をここに提供する必要がありますが、コードを直接実行できないため、実行可能なコードスニペットを提供することはできません）log(...)

Sassmeisterでこの要点を試してみてください。（Sassmeisterリンクはこちらで提供する必要があります）

SASSのより高度なロギングシステムについては、「Build Logger Hybrid Macros」を読むことをお勧めします。 SASSの古いバージョンのサポートについては、SASSの複数のバージョンをいつサポートするかを確認することをお勧めします。

（SASSのエラーの責任ある使用に関するFAQセクションをここに含める必要がありますが、スペースの制限のために省略しました。）

以上が@errorをsassで責任を持って使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。