RFS v5.0.0更新

RFSとは？（What is RFS?）

BootstrapのサイドプロジェクトであるRFSは、当初はフォントサイズを変更するために開発されたユニットサイズ変更エンジンであった（故にResponsive Font Sizesの略でRFSと命名）。最新のRFSでは、margin, padding, border-radius, box-shadow などのユニットで、ほとんどのCSSプロパティの値を再拡縮できる。

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

RFSを使用（Using RFS）

ミックスインはBootstrapに組み込まれており、Bootstrapの scss を組み込むと利用できるようになる。必要に応じてRFSを単体でインストールすることもできる。

ミックスインを使用（Using the mixins）

rfs() ミックスインには、font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left の省略形がある。Sassソースとコンパイル済のCSSについては、以下の例に記載。

設定例

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

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

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

他のプロパティは、次のように rfs() ミックスインに渡される。

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

!important（優先順位を上げる）はどんな値にでも追加できる：

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

関数を使用（Using the functions）

インクルードを使用したくない場合、以下の2つの関数もある：

• rfs-value()は、px 値が渡されると値を rem 値に変換する。それ以外の場合は、同じ結果値を返す。
• rfs-fluid-value() は、プロパティの再拡縮が必要な場合、流動的な値を返す。

以下の例では、Bootstrapに組み込まれているレスポンシブ・ブレークポイントミックスインの1つを使用して、lg（大）のブレークポイントより下のスタイルのみに適用。

設定例

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

出力例

CSS@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125remは十分小さいので、RFSはこれを拡大縮小しない */
  }
}

拡張ドキュメント（Extended documentation）

RFSは、Bootstrap組織下の独立したプロジェクトである。RFSとその設定についての詳細はGitHubレポジトリに記載。