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

この記事では、SASSがタイポグラフィーユニット変換を単純化する方法を調(diào)査し、手動(dòng)計(jì)算の必要性を排除します。 ピクセル、EMS、パーセンテージ、ポイント間の変換を処理するSASS関數(shù)を構(gòu)築します。

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

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

前提條件：

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

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

SASS関數(shù)：??

関數(shù)は3つの引數(shù)を取ります：

：変換する數(shù)値値。

：値の現(xiàn)在の単位（px、em、％、pt）。convert

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

関數(shù)の拡張：

@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);
    }
  }
}

この関數(shù)は、次のことを追加することでさらに強(qiáng)化できます REMユニットのサポート。

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

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

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

デフォルトのユニット設(shè)定。

よくある質(zhì)問（FAQ）：

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

以上が誤字ユニットをSASSで変換しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。