ホームページ ウェブフロントエンド 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)

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

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

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

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

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? Apr 05, 2025 pm 11:24 PM

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

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

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

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

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

SVGでタータンパターンを生成する静的サイトを作成する方法 SVGでタータンパターンを生成する静的サイトを作成する方法 Apr 09, 2025 am 11:29 AM

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

See all articles