誤字ユニットをSASSで変換します

SASS：タイポグラフィーユニット変換を合理化します

この記事では、SASSがタイポグラフィーユニット変換を単純化する方法を調査し、手動計算の必要性を排除します。 ピクセル、EMS、パーセンテージ、ポイント間の変換を処理するSASS関数を構築します。

この記事は、2015年3月5日に最初に公開された作品の更新されたバージョンです。

歴史的に、Web開発者はしばしば固定ピクセルベースのレイアウトに依存していました。 レスポンシブデザインは、より柔軟なアプローチを導きましたが、タイポグラフィユニット（ピクセル、EMS、パーセンテージ）間の変換は依然として一般的な課題です。 これには、多くの場合、退屈な手動変換またはコンサルティング変換チャートが含まれます。 このチュートリアルは、これらの変換を自動化し、時間を節約し、エラーを削減するためのSASS機能を示しています。

前提条件：

デフォルトのフォントサイズをCSSで定義する必要があります（通常は16px）。 このチュートリアルでは、16pxのデフォルトを想定しています

関数は、ピクセル（PX）、EMS（EM）、パーセンテージ（％）、およびポイント（PT）をサポートします。

SASS関数：​​

関数は3つの引数を取ります：

：変換する数値値。

：値の現在の単位（px、em、％、pt）。convert

：目的のユニット（px、em、％、pt）。
1. $value
2. $currentUnit使用法：
3. $convertUnit

関数の拡張：

@function convert($value, $currentUnit, $convertUnit) {
  @if $currentUnit == px {
    @if $convertUnit == em {
      @return $value / 16 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 16);
    } @else if $convertUnit == pt {
      @return $value * 1.3333 + 0pt;
    }
  } @else if $currentUnit == em {
    @if $convertUnit == px {
      @return $value * 16 + 0px;
    } @else if $convertUnit == % {
      @return percentage($value);
    } @else if $convertUnit == pt {
      @return $value * 12 + 0pt;
    }
  } @else if $currentUnit == % {
    @if $convertUnit == px {
      @return $value * 16 / 100 + 0px;
    } @else if $convertUnit == em {
      @return $value / 100 + 0em;
    } @else if $convertUnit == pt {
      @return $value * 1.3333 * 16 / 100 + 0pt;
    }
  } @else if $currentUnit == pt {
    @if $convertUnit == px {
      @return $value * 1.3333 + 0px;
    } @else if $convertUnit == em {
      @return $value / 12 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 12);
    }
  }
}

この関数は、次のことを追加することでさらに強化できます REMユニットのサポート。

無効な入力のためのエラー処理。

.foo {
  font-size: convert(16, px, em); // Returns 1em
}

.bar {
  font-size: convert(100, %, px); // Returns 16px
}

デフォルトのユニット設定。

よくある質問（FAQ）：

• このセクションでは、CSS、SASS、およびタイポグラフィーユニット変換に関する一般的な質問について説明します。 答えはオリジナルに似ていますが、明確さと簡潔さのために言い換えられます。
  • css vs. sass：cssはスタイルシート言語です。 SASSは、CSSにコンパイルされるプレプロセッサであり、変数やネストなどの機能を提供し、コードの組織化と保守性を改善します。
  • CSSをSASSに変換する：オンラインツールまたは手動変換により、CSSをSASSに変換できます。
  既存のCSSプロジェクトでSASSの使用：
  • SASSはCSSと互換性があり、徐々に統合できます。 sassにCSSにコンパイルします：
  sassコンパイラ（DART SASSのような）は、
  • 。 CSS上のSASSの利点： SASSは、より良いコード組織、再利用可能性、保守性のために変数、ネスト、ミキシン、および機能を提供します。 .scss.csssassのタイポグラフィーユニット：
  これらには
  • 、、、
  、および
  • 。 SASSのタイポグラフィユニットの変換：pxビルトインSASS関数を使用するか、上記のようなカスタム関数を作成します。 emSASSはすべてのCSS関数をサポートし、独自の追加を追加します。 SASSの変数を使用するrempt：%。
  を使用して変数を宣言します SASSのミキシン：
  • 。 この改善された応答は、主要な情報を保持し、FAQに対処しながら、SASS関数のより簡潔で十分に構造化された説明を提供します。 画像は要求に応じて含まれています。

以上が誤字ユニットをSASSで変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。