リンクユーティリティ（Link） v5.3.0新設

リンクの不透明度（Link opacity）

ユーティリティでリンクの rgba() カラー値のアルファの不透明度を変更。色の不透明度を変更するとコントラストが不十分なリンクになることがあるので注意。

不透明度の種類

設定例

リンクの不透明度10％の場合<p><a class="link-opacity-10" href="#">透明なリンク</a></p>

ホバー状態での不透明度の変更もできる。

不透明度の種類

設定例

ホバー状態の不透明度10％の場合<p><a class="link-opacity-10-hover" href="#">ホバー状態で透明</a></p>

リンクの不透明度10％、ホバー状態の不透明度75％の場合<p><a class="link-opacity-10 link-opacity-75-hover" href="#">ホバー状態で不透明度を変更</a></p>

リンクの下線（Link underlines）

下線の色（Underline color）

下線の色はリンクの文字色とは別に変更できる。

カラーの種類※モードによって色が見やすいように背景色をつけています

設定例

Primaryの場合<p><a href="#" class="link-underline-primary">下線はPrimary</a></p>

下線との距離（Underline offset）

下線のテキストからの距離（オフセット）を変更。オフセットは em 単位で設定され、要素の現在の font-size に合わせて自動的に拡大縮小される。

オフセットの種類

設定例

オフセット1の場合<p><a class="link-offset-1" href="#">オフセット1のリンク</a></p>

下線の不透明度（Underline opacity）

下線の不透明度を変更。.link-underline を追加して、アルファの不透明度を変更するために使用する rgba() の色を最初に設定する必要がある。

不透明度の種類

設定例

下線の不透明度10％の場合<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">不透明度10%の下線</a></p>

ホバー状態のバリエーション（Hover variants）

.link-opacity-*-hover ユーティリティと同様に .link-offset と .link-underline-opacity ユーティリティにもデフォルトで :hover のバリエーションを組み込んでいる。いろいろ組み合わせてユニークなリンクスタイルが作れる。

見本

設定例

<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
  ホバー状態でのみ下線が表示
</a>

色付きリンクヘルパーと併用（Colored links）

色付きリンクヘルパーが更新され、リンクユーティリティと併用できるようになった。新しいユーティリティを使用して、リンクの不透明度、下線の不透明度、下線との距離を変更できる。

見本※モードによって色が見やすいように背景色をつけています

設定例

Primaryの場合<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primaryのリンク</a></p>

CSS

以下に加えて、カラーなどのCSSカスタムプロパティ（別名：CSS変数）やRebootのリンクの項目についてもご参照下さい。

CSS変数（CSS variables）

デフォルトの設定

scss/_root.scss 内の設定--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};

--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};

@if $link-hover-decoration != null {
  --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
}

Sass変数（Sass variables）

デフォルトの設定

scss/_variables.scss 内 の設定$link-color:                              $primary;
$link-decoration:                         underline;
$link-shade-percentage:                   20%;
$link-hover-color:                        shift-color($link-color, $link-shade-percentage);
$link-hover-decoration:                   null;

SassユーティリティAPI（Sass utilities API）

リンクユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定

scss/_utilities.scss 内 utils-links の設定"link-opacity": (
  css-var: true,
  class: link-opacity,
  state: hover,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"link-offset": (
  property: text-underline-offset,
  class: link-offset,
  state: hover,
  values: (
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"link-underline": (
  property: text-decoration-color,
  class: link-underline,
  local-vars: (
    "link-underline-opacity": 1
  ),
  values: map-merge(
    $utilities-links-underline,
    (
      null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
    )
  )
),
"link-underline-opacity": (
  css-var: true,
  class: link-underline-opacity,
  state: hover,
  values: (
    0: 0,
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  ),
),