@errorを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コアデザイナーは、全体を考慮に入れた賢い人であるという事実を完全に見落とし、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ライブラリとフレームワークでは一般的な変数であるため、 - を使用しないように警告したいと思います。 SASS 3.3では、SASS 3.2では問題ではないかもしれませんが、これにより、グローバル 変数がオーバーライドされます。 null条件を使用してみましょう。
で使用すると意味があります。 NOOP関数のNOOP条件。 $_
$_
わかりました!前のコードでテストしてみましょう:
<code>@function noop() {}</code>
です
<code>@mixin log($message) { @if feature-exists('at-error') == true { @error $message; } @else { @warn $message; // 由于函数不能在 Sass 中的任何地方调用, // 我们需要在一个虚拟条件中进行调用。 @if noop() {} } }</code>
です
<code>@include log('哎呀,你刚才的操作出了问题!');</code>
<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
<code>@include log('哎呀,你刚才的操作出了问题!');</code>
<code>@mixin log($message) { ... }</code>
それだけです!これで、関数内で
関数を使用して(制限のため)、ハイブリッドマクロを他の場所で使用して責任を持ってエラーを投げることができます。とてもきれいです! log(...)
log(...)
SASSのより高度なロギングシステムについては、「Build Logger Hybrid Macros」を読むことをお勧めします。 SASSの古いバージョンのサポートについては、SASSの複数のバージョンをいつサポートするかを確認することをお勧めします。
(SASSのエラーの責任ある使用に関するFAQセクションをここに含める必要がありますが、スペースの制限のために省略しました。)
以上が@errorをsassで責任を持って使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

タータンは、スコットランド、特にファッショナブルなキルトに通常関連する模様のある布です。 Tartanify.comでは、5,000を超えるTartanを集めました

フロントエンド開発でWindowsのような実装方法...
