RFS

RFSとは？

BootstrapのサイドプロジェクトであるRFSは、元々フォントサイズをリサイズするために開発されたユニットリサイズエンジンです（そのため、Responsive Font Sizesの略です）。現在、RFSは、`margin`、`padding`、`border-radius`、さらには`box-shadow`など、単位値を持つほとんどのCSSプロパティを再スケーリングできます。

このメカニズムは、ブラウザのビューポートの寸法に基づいて適切な値を自動的に計算します。レスポンシブスケーリング動作を有効にするために、`rem`とビューポート単位を組み合わせた`calc()`関数にコンパイルされます。

RFSの使用方法

mixinはBootstrapに含まれており、Bootstrapの`scss`をインクルードすると使用できます。RFSは、必要に応じてスタンドアロンでインストールすることもできます。

mixinの使用方法

`rfs()` mixinには、`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()` mixinに渡すことができます。

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

`!important`は、必要な値に追加することもできます。

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

関数の使用方法

includeを使用したくない場合は、2つの関数もあります。

• `rfs-value()`は、`px`値が渡された場合、値を`rem`値に変換します。それ以外の場合は、同じ結果を返します。
• `rfs-fluid-value()`は、プロパティの再スケーリングが必要な場合、値の流動バージョンを返します。

この例では、Bootstrapに組み込まれているレスポンシブブレークポイントmixinの1つを使用して、`lg`ブレークポイント以下のみにスタイルを適用しています。

.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リポジトリを参照してください。