+link-colors()

リンクの link、hover、active、visited, focus それぞれの状態での color を一行で書くための mixin です。

引数

• 第一引数 link 時の色を渡します
• 第二引数 hover 時の色を渡します
• 第三引数 active 時の色を渡します
• 第四引数 visited 時の色を渡します
• 第五引数 focus 時の色を渡します

例

1
2

a
  +link-colors(blue, red, green, orange, gray)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

a {
color: blue;
}
a:visited {
  color: orange;
}
a:focus {
  color: gray;
}
a:hover {
  color: red;
}
a:active {
  color: green;
}

+block-link

display: block と text-decoration: none を一行で書くための mixin です。ボタンの見た目のリンクなどに使うことを想定しています。

例

sass

1
2

a
  +block-link

css

1
2
3
4

a {
  display: block;
  text-decoration: none;
}

+inline-block-link

display: inline-block と text-decoration: none を一行で書くための mixin です。ボタンの見た目のリンクなどに使うことを想定しています。

例

sass

1
2

a
  +inline-block-link

css

1
2
3
4

a {
  display: inline-block;
  text-decoration: none;
}

+hover-link( )

リンクタグなどで、 link の状態では text-decoration: none 、 hover と active の状態では text-decoration: underline となるスタイルを適用するための mixin です。

引数

• 第一引数には、特定の class 名を渡します。すると、その class が付いた場合は hover-link( ) の hover 、 active の状態と同じスタイルが適用されます。

例

sass

1
2
3
4
5

a
  +hover-link

span
  +hover-link('.is-hover')

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

a {
  text-decoration: none;
}
a:hover,
a:active {
  text-decoration: underline;
}

span {
  text-decoration: none;
}
span:hover,
span:active,
span.is-hover {
  text-decoration: underline;
}

+hover-link-reverse( )

リンクタグなどで、 link の状態では text-decoration: underline 、 hover と active の状態では text-decoration: none にとなる、上記 +hover-link( ) と逆の設定を適用するための mixin です。

引数

• 第一引数には、特定の class 名を渡します。すると、その class が付いた場合は hover-link-reverse の hover 、 active の状態と同じスタイルが適用されます。

例

sass

1
2
3
4
5

a
  +hover-link-reverse

span
  +hover-link-reverse('.is-hover')

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

a {
  text-decoration: underline;
}
a:hover,
a:active {
  text-decoration: none;
}

span {
  text-decoration: underline;
}
span:hover,
span:active,
span.is-hover {
  text-decoration: none;
}