ホームページ ウェブフロントエンド CSSチュートリアル @errorをsassで責任を持って使用します

@errorをsassで責任を持って使用します

Feb 24, 2025 am 09:25 AM

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ライブラリとフレームワークでは一般的な変数であるため、
  • を使用しないように警告したいと思います。 SASS 3.3では、SASS 3.2では問題ではないかもしれませんが、これにより、グローバル
  • 変数がオーバーライドされます。 null条件を使用してみましょう。
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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

静的フォームプロバイダーの比較 静的フォームプロバイダーの比較 Apr 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

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

毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

HTMLダイアログ要素を使用したいくつかの実践 HTMLダイアログ要素を使用したいくつかの実践 Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

ペーパーフォーム ペーパーフォーム Apr 16, 2025 am 11:24 AM

購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? 「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合:

それはすべて頭の中にあります:Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理する それはすべて頭の中にあります:Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理する Apr 15, 2025 am 11:01 AM

ドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です

独自の非JavaScriptベースの分析をホストするためのオプション 独自の非JavaScriptベースの分析をホストするためのオプション Apr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

See all articles