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

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 までご連絡ください。
CSSグリッドとは何ですか?CSSグリッドとは何ですか?Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか?CSS Flexboxとは何ですか?Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか?CSSを使用してWebサイトを応答するにはどうすればよいですか?Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

CSSボックスサイズのプロパティは何をしますか?CSSボックスサイズのプロパティは何をしますか?Apr 30, 2025 pm 03:18 PM

この記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。

CSSを使用してアニメーション化するにはどうすればよいですか?CSSを使用してアニメーション化するにはどうすればよいですか?Apr 30, 2025 pm 03:17 PM

記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。

CSSを使用してプロジェクトに3D変換を追加できますか?CSSを使用してプロジェクトに3D変換を追加できますか?Apr 30, 2025 pm 03:16 PM

記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。

CSSに勾配を追加するにはどうすればよいですか?CSSに勾配を追加するにはどうすればよいですか?Apr 30, 2025 pm 03:15 PM

この記事では、CSSグラデーション(線形、放射状、繰り返し)を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。

CSSの擬似要素とは何ですか?CSSの擬似要素とは何ですか?Apr 30, 2025 pm 03:14 PM

記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。

See all articles

ホット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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。