CSSとSASS精度の物語

レイアウトのパーセンテージの課題：ブラウザの違いと浮動点精度の問題

ブラウザの矛盾と浮動点精度の仕様の欠如により、レイアウトの割合は非常に困難です。

SASSの利点：精度とコードの読みやすさを向上させます

SASSは、複雑な計算を処理し、StyleSheetを読みやすくしやすくすることで精度を向上させる前処理器スクリプト言語です。ただし、SASSのデフォルト精度オプションは5ですが、場合によっては低すぎる場合があります。

関数：ブラウザの計算と丸め

calc()

CSS関数により、ブラウザは計算と丸めを処理でき、より良い結果が得られる可能性があります。この関数は、SASS操作と組み合わせて、CSS精度の両方の最高の世界を提供します。

calc(..)

初期設定

説明全体を開始する前に、私たちのケースに非常に関連する小さなコードに取り組みます。

問題は何ですか？

<code>.list-item {
  float: left;
  width: 33%;
}</code>

このコードの何が問題なのか疑問に思うかもしれません。外観から、大きな問題はありません。これは3列のグリッドレイアウトであり、非常に一般的です。

ただし、33％33％は99％に等しく、100％ではありません。ほとんどの場合、これは違いをもたらさないかもしれませんが、直線のアライメントを扱う場合、1％が大きな影響を与える可能性があります。幅14ピクセルの容器の1％は14ピクセルです。これはかなりの距離です。

小数点をより正確にするために小数点を移動する（または追加する）だけではないのですか？ギャップを1.4ピクセルまたは0.14ピクセルに減らすことができますが、これはもはやトラブルの価値がないと思います。次に、ここから始めます。

うまく機能しますが、それでも完璧ではありません。ジョン・アルビン・ウィルキンスは、この問題でこの問題を広範囲に議論しています。まだ読んでいない場合は、読んでください。

ブラウザはこれを処理できませんか？

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

この時点で、ブラウザがなぜそれを機能させることができないのか疑問に思うかもしれません。問題は、CSS仕様が（皮肉なことに）、パーセンテージ数のフローティングポイント精度をどうするかをブラウザベンダーに指定していないことです。 CSSの仕様で詳細が省略されると、各ブラウザが独自の方法でそれを処理することを確認できます。

上記の記事の次の例：

[…]列あたり100％の幅の6列グリッド÷6 = 16.666667％を使用します。幅1000ピクセルのビューポートで（数学を簡単にするために便利に選択しました）、各列は166.66667ピクセルに計算されます。仕様はガイドラインを提供していないため、ブラウザメーカーは独自のルールを自由に策定できます。ブラウザが最も近いピクセルに丸くなると、この例では167ピクセルが得られます。しかし、167 x 6 = 1002ピクセル以降、私たちのビューポートの6つの列すべてを収容する余地はもうありません。または、ブラウザが列あたり166ピクセルまで丸められた場合、すべての列をビューポートに完全に入れるよりも4ピクセルが少なくなります。 - ジョン・アルビン・ウィルキンス

これが起こったことです。インターネットエクスプローラーの古いバージョン（主に6および7）が最も近い整数に丸みを帯びており、レイアウトの中断を引き起こしました。 WebKitブラウザは締めくくります。これにより、壊滅的なレイアウトの結果が防止されますが、余分なスペースが残ります。 Opera（少なくとも古いレンダリングエンジンでは）は、私が説明するのが面倒だという奇妙なことをしています。しかし、仕様にはこの動作に関するルールはありませんので、誰を責める必要がありますか？もちろん、サブピクセルレンダリングを使用するブラウザではありません。最終的にこれが最良の結果を生み出す方法だからです。

とにかく、これは単に混乱であり、この記事の結論でこの問題について再び議論します。

sassはどうですか？

SASSは数学的操作をサポートしています。これは新しいものではありません。実際、SASSが最初に使用したいくつかのことの1つです（数学ベースのグリッドシステムの構築に）。容器の幅を3つの等しい部分に分割したいとSASSに伝えることができます。

<code>.list-item {
  float: left;
  width: 33%;
}</code>

同じ結果を取得するためにパーセンテージ（..）関数を使用することもできます。

RubyとLibsassでは、SASSの精度オプションは5です。これは、非常に低いため、実際には問題です。

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

このコードは、次のCSSを生成します：

これはブラウザの問題を解決するものではありませんが、執筆スタイルシートを簡単にします。計算や精度に対処する必要がないだけでなく、計算を実際に表示することで、コードを読みやすく更新しやすくします。

<code>.list-item {
  float: left;
  width: (100% / 3);
}</code>

これは良いことだと思います。

両方の世界の最高の

これまでのところ、SASSが値をハードコードするのではなく、計算を処理させる方が良いことを学びました。さて、最良の方法は、ブラウザにこれをできる限り最良の方法で処理させることです。これを行うには、

css関数を使用できます。

calc(..)

このコードは何にもコンパイルされません。著者が書くように、ブラウザに表示されます。ブラウザは、それを最大限に活用する責任があります。ブラウザが通常の値と同じように

<code>.list-item {
  float: left;
  width: percentage(1 / 3);
}</code>

値を処理するかどうかは完全に正直に言っています。私は彼らが計算をしてからラウンドすると思います。一部のブラウザは、式にサブピクセルレンダリングを組み込んでいるようです。これに関する洞察がある場合は、コメントで共有してください。

calc(..)式（主にInternet Explorer 8およびOpera Mini）をサポートしていないブラウザの場合、SASS操作として表される静的値をその前に配置できます。このようにして、私たちは両方の世界で最高のものを持つことができます。

<code>.list-item {
  float: left;
  width: 33%;
}</code>

結論

すぐにレビューしましょう。第一に、ブラウザの矛盾と浮動小数点精度の仕様の欠如により、レイアウトの割合を処理するのは困難です。

次に、複雑な計算によって生成されたハードコード値は通常、良い考えではありません。 SASSに近似値（5小数点）を計算できます。

さらに良いことに、ブラウザに近似値を計算できます。理想的な世界では、ブラウザが数学とレンダリングを担当するとき、それを最大限に活用できるはずです。この方向に移動するには、calc(..)関数に依存します。

これはほぼ現在の状況です。新しいものは何もありませんが、簡単なレビューが役立つと思います！

CSSおよびSASS精度（FAQ）

に関するFAQ

CSSとSASSの違いは何ですか？

CSS（Cascading Style Sheet）は、HTMLで書かれたドキュメントの外観とフォーマットを説明するために使用されるStyleSheet言語です。 SASS（SyntaxのSmart StyleSheets）は、CSSに解釈またはコンパイルされたプリプロセッサスクリプト言語です。 2つの主要な違いは、SASSには、変数、ネスト、ミックス、継承など、CSSには存在しない機能があることです。これらの機能により、SASSはCSSよりも強力で柔軟になります。

CSSとSASSでの精度はどのように機能しますか？

CSSおよびSASSの精度とは、スタイルレンダリングの詳細と精度を指します。 CSSでは、変数や関数が不足しているため、精度はしばしば制限されています。一方、SASSは、高度な機能のおかげでより高い精度を可能にします。たとえば、特定の色またはサイズの変数を定義し、スタイルシート全体で一貫して使用して、設計の正確性と一貫性を確保できます。

どんなWebプロジェクトでもSASSを使用できますか？

はい、あらゆるWebプロジェクトでSASSを使用できます。 SASSは、CSSのすべてのバージョンと互換性があります。したがって、CSSから始めて、必要に応じてSASS機能を追加できます。ただし、SASSにはプリプロセッサがブラウザが解釈できるCSSに変換する必要があることを忘れないでください。

CSSでSASSを使用することの利点は何ですか？

SASSは、CSSよりもいくつかの利点を提供します。これにより、変数、ネスト、ミックスイン、継承を使用することで、スタイルシートがより整理され、再利用可能で、メンテナンスが容易になります。 SASSは数学操作もサポートしており、スタイルシートで寸法と色を直接計算できるようにします。

CSSまたはSASSコードの精度を改善する方法は？

変数を使用して一貫した値を取得し、数学操作を使用して正確な計算を実行し、関数とミキシンを使用して再利用可能なスタイルを取得することにより、CSSまたはSASSコードの精度を改善できます。さらに、CSSリセットを使用すると、異なるブラウザー間の一貫性を確保できます。

CSSプリプロセッサとは何ですか？なぜSASSはそれを必要とするのですか？

CSSプリプロセッサは、CSSのデフォルト機能を拡張するスクリプト言語です。 StyleSheetsで変数、ネストされたルール、ミックス、機能、数学操作を使用できます。 SASSはCSSプリプロセッサです。ブラウザはCSSのみを解釈できるため、必要です。したがって、SASSコードは、Webプロジェクトで使用される前にCSSにコンパイルする必要があります。

SASSは、ドライの書き込み（自分自身を繰り返さないでください）コードをどのように役立ちますか？

SASSは、変数、Mixin、継承などの機能をサポートしています。これは、ドライコードの書き込みに役立ちます。変数を使用すると、一度に値を定義し、複数の場所で使用できます。 Mixinを使用すると、他のルールに含めることができる再利用可能なスタイルを作成できます。継承を使用すると、あるセレクターから別のセレクターにCSSプロパティのセットを共有できます。

SASSを使用する潜在的な落とし穴は何ですか？

SASSには多くの利点がありますが、潜在的な落とし穴もあります。前処理者の必要性は、開発プロセスの複雑さを高める可能性があります。さらに、ネストや混合物などの一部のSASS機能により、不適切に使用するとCSS出力が膨満し、非効率性が発生する可能性があります。

学習とSASSの使用を開始する方法は？

オンラインでSASSを学ぶために利用できるリソースがたくさんあります。公式SASS Webサイトは、開始するための包括的なガイドを提供しています。 Web開発Webサイトやオンライン学習プラットフォームでチュートリアルを見つけることもできます。 SASSを始めるには、開発環境にSASSプリプロセッサをセットアップする必要があります。

既存のCSSコードをSASSに変換できますか？

はい、既存のCSSコードをSASSに変換できます。 SASSはCSSのスーパーセットであるため、有効なCSSは有効なSASSです。まず、.cssファイルを.scss（sassy css）に変更してから、コードでsass機能の使用を徐々に開始できます。

以上がCSSとSASS精度の物語の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。