RFS

RFS について

Bootstrap のサイドプロジェクトである RFS は、元はフォントサイズをリサイズするために開発されたリサイジングエンジンです (RFS は Responsive Font Size の略称です)。今では RFS は、margin、padding、border-radius、box-shadow といった、ほとんどの CSS プロパティをリスケーリングできます。

適切なサイズを自動的に計算する仕組みは、ブラウザのビューポートのサイズを基にしています。値を rem やビューポートのサイズを含んだ calc() 関数にコンパイルすることで、レスポンシブルなスケーリングを実現しています。

RFS の使い方

RFS のミックスインは Bootstrap に含まれており、Bootstrap の scss をインクルードすることで利用可能になります。RFS は必要であれば個別にインストールすることもできます。

ミックスインの使い方

rfs() ミックスインは font-size、margin、margin-top、margin-right、margin-bottom、margin-left、padding、padding-top、padding-right、padding-bottom、そして padding-left のショートカットを持っています。ソースの Sass とそれをコンパイルした CSS の例は以下です。

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

rfs() には以下のように様々なプロパティを渡すことができます:

.selector {
  @include rfs(4rem, border-radius);
}

!important を追加することも可能です。

.selector {
  @include padding(2.5rem !important);
}

関数の使い方

インクルードしたくない場合は、別の手段として2つの関数があります。

• rfs-value() は px 値が渡された場合に rem 値に変換します。それ以外の値に対しては同じ値を返します。
• rfs-fluid-value() はプロパティがリスケーリングする必要があった場合に、リスケーリング可能な式に変換します。

以下の例では、lg ブレークポイント下でのみ適用したいスタイルの実装に Bootstrap ビルトインのレスポンシブルなブレークポイントミックスイン を利用しています。

.selector {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

さらに詳しい情報

RFS は Bootstrap 組織下の別のプロジェクトです。RFS やその設定について詳しく知りたい場合は、GitHub リポジトリ をご覧ください。