htmlcss Compass/SASS を使ったミックスインの作成

CATEGORY: HTML/CSS | TAG: ,

2014年3月30日

＠IT に掲載されていた Compass/SASS を使ったミックスインの作成方法の記事をもとに、個人的に使いそうなことをカスタマイズしたりした際のメモ。

Sass と Compass がインストールされていることが前提。Compass を使用しないものもあるが、「@import “compass”;」が記述してあることが必要。インストールや設定に関しては「Sass/Compass のインストールと基本的な環境設定」を参照。

サンプル

ボックスシャドウを利用したミックスイン

背景に彫り込まれたように見える線

border とそれに対する box-shadow を使って背景に彫り込まれたように見える線を作成。

border ：色は基本的に黒で透明度を指定する
例：border-bottom: 1px solid rgba(0, 0, 0, 0.3)

box-shadow ：色は基本的に白で透明度を指定する。
例：box-shadow: #fff 0 1px 0;

  • ブラー, スプレッドは「0」に
  • 背景色により、 border と box-shadow の透明度を調整
  • また、box-shadow の長さを調整すると効果が変わる場合もある

以下は右上から左下に向かっての光源を想定した場合のミックスイン。

border を使っているので Box の各方向（top, right, bottom, left）に指定可能。（但し、同じ Box に全てを同時には指定できない。上書きされてしまうので。たぶん） 

//背景に彫り込まれたように見える線 top
@mixin line-top($black: .2, $white: .3, $border-width: 1px, $shadow-width: 1px, $darken-white: 0%){
  border-top: $border-width solid rgba(0, 0, 0, $black);
  @include box-shadow(darken(rgba(255, 255, 255, $white), $darken-white) 0 $shadow-width 0 inset);
}

//背景に彫り込まれたように見える線 bottom
@mixin line-bottom($black: .2, $white: .3, $border-width: 1px, $shadow-width: 1px, $darken-white: 0%){
  border-bottom: $border-width solid rgba(0, 0, 0, $black);
  @include box-shadow(darken(rgba(255, 255, 255, $white), $darken-white) 0 $shadow-width 0);
}

//背景に彫り込まれたように見える線 left
@mixin line-left($black: .2, $white: .3, $border-width: 1px, $shadow-width: 1px, $darken-white: 0%){
  border-left: $border-width solid rgba(0, 0, 0, $black);
  @include box-shadow (darken(rgba(255, 255, 255, $white), $darken-white) -#{$shadow-width} 0 0);
}

//背景に彫り込まれたように見える線 right
@mixin line-right($black: .2, $white: .3, $border-width: 1px, $shadow-width: 1px, $darken-white: 0%){
  border-right: $border-width solid rgba(0, 0, 0, $black);
  @include box-shadow(darken(rgba(255, 255, 255, $white), $darken-white) -#{$shadow-width} 0 0 inset);
}
  • $black: ボーダーの透明度
  • $white: ボックスシャドウの透明度
  • $border-width: ボーダーの幅
  • $shadow-width: 影の長さ
  • $darken-white: 白い影の色の調整（暗くする割合を指定）
@include box-shadow()
コンパスのミックスイン
box-shadow(横オフセット, 縦オフセット, ブラー, スプレッド, 色, キーワード)
詳細は「Compass のミックスイン」参照

使い方：box などに以下のような指定するだけで線が書ける。

.foo {
  @include line-bottom($black: .2, $white: .7);
}

//コンパイル後
.foo {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
  box-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
}

@include line-bottom($black: .3, $white: 1, $darken-white: 14%);を指定した場合の線

@include line-bottom($black: .3, $white: .9, $shadow-width: 2px, $darken-white: 20%); を指定した場合の線

枠線代わりに利用

さりげない box-shadow を使い border を使うよりも柔らかく表現する。

  • 縦、横の影は「0」
  • 色は「黒」で薄く（alpha 0.15 のシャドウ）
  • ぼかしは 2px
  • alpha と ぼかしは背景色などにより調整
@mixin box-shadow-border($shadow: 0.15, $blur:2px){
  @include box-shadow(0 0 $blur rgba(0, 0, 0, $shadow) );
}
  • $shadow: 影の色の透明度。デフォルト：0.15
  • $blur: ぼかし。デフォルト：2px

使用例（角丸を追加）

.bs_border {
  @include box-shadow-border($shadow: 0.5, $blur:1px);
  @include border-radius(4px);
}

//コンパイル後
.bs_border {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
box-shadow-border();
@include border-radius()
コンパスのミックスイン
border-radius(角丸の半径)
詳細は「Compass のミックスイン」参照

内側にぼかして質感を出す

内側に向かってぼかしの長い box-shadow を入れることで質感を出す。

  • 縦、横の影は「0」
  • 色は「黒」で薄く（alpha 0.2 のシャドウ）
  • ぼかしは長めに 10px
  • 内側に向かってぼかすので inset キーワードを指定
  • alpha と ぼかしは背景色などにより調整
@mixin box-shadow-border-inset($shadow: .2, $blur: 10px){
  @include box-shadow(0 0 $blur rgba(0, 0, 0, $shadow) inset);
}

使用例（角丸を追加）

.inset_border {
  @include box-shadow-border-inset($shadow: .3, $blur: 20px);
  @include border-radius(4px);
}

//コンパイル後
.inset_border {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) inset;
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
box-shadow-border-inset();

凹ボックス（deboss-box）

内側に影を付けて、浅いへこみのあるボックスを表現。

この例では、右上からの光源を想定

  • 光源の方向（右上・内側）に影：alpha 0.05 のぼかし、2px の黒い box-shadow
  • 光源とは逆方向（ 左下・外側）にハイライト：alpha .8 のぼかし 0 の白い box-shadow
  • 濃い色の上に乗せる場合は、ハイライトをもっと薄くする
  • ソリッドな物質感を出すため、ぼかしは 0
  • boxのまわりに、黒いalpha 0.1の線を入れる
@mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) {
  border: 1px solid rgba(0,0,0,$border);
  @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 2px inset, rgba(255,255,255,$highlight) -1px 1px 0);
}

使用例

.deboss {
  @include deboss-box($border: .1, $shadow: .05, $highlight: .8);
}


//コンパイル後
.deboss {
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: rgba(0, 0, 0, 0.05) -1px 1px 2px inset, rgba(255, 255, 255, 0.8) -1px 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.05) -1px 1px 2px inset, rgba(255, 255, 255, 0.8) -1px 1px 0;
  box-shadow: rgba(0, 0, 0, 0.05) -1px 1px 2px inset, rgba(255, 255, 255, 0.8) -1px 1px 0;
}
deboss-box()

このサンプルの場合、背景がかなり明るいので「さりげなさ過ぎて」ほとんど効果がわからない（いろいろ値を変更してみたが、うまくいかなかった）。もう少し暗い背景だと効果がよくわかるが。

これを少し変更すると、線の部分のみがへこんでいるように見える枠線が作成できる。以下は薄い背景色の場合の例。

@mixin deboss_border($border: .1, $highlight1: .8, $highlight2: .8) {
  border: 1px solid rgba(0,0,0,$border);
  @include box-shadow(rgba(255,255,255,$highlight1) -1px 1px 1px inset, rgba(255,255,255,$highlight2) -1px 1px 0);
}

.test_deboss_border {
  @include deboss_border($border: .08);
}

//コンパイル後
.test_deboss_border {
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: rgba(255, 255, 255, 0.8) -1px 1px 1px inset, rgba(255, 255, 255, 0.8) -1px 1px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.8) -1px 1px 1px inset, rgba(255, 255, 255, 0.8) -1px 1px 0;
  box-shadow: rgba(255, 255, 255, 0.8) -1px 1px 1px inset, rgba(255, 255, 255, 0.8) -1px 1px 0;
}
deboss_border()

もう少しあからさまに凹みを表現する場合の例。

@mixin deboss-box-deep($background: 0.02, $depth: 1px, $shadow: 0.3, $highlight:0.3) {
  background:rgba(0, 0, 0, $background);
  @include box-shadow(rgba(0,0,0,$shadow) 1px 1px $depth inset, -1px 0 $depth rgba(0, 0, 0, $shadow) inset,rgba(255,255,255,$highlight) 0 -1px $depth inset);
}

$background: 背景を少し暗くするための値（不要であれば 0 を指定）
$depth: 凹みの深さ
$shadow: 影の値（透明度）
$highlight:ハイライトの値（透明度）

使用例

.deboss_deep {
  @include deboss-box-deep($background: 0.01, $shadow: 0.2, $highlight: 0.1);
}

//コンパイル後
.deboss_deep {
  background: rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px inset, -1px 0 1px rgba(0, 0, 0, 0.2) inset, rgba(255, 255, 255, 0.1) 0 -1px 1px inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px inset, -1px 0 1px rgba(0, 0, 0, 0.2) inset, rgba(255, 255, 255, 0.1) 0 -1px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px inset, -1px 0 1px rgba(0, 0, 0, 0.2) inset, rgba(255, 255, 255, 0.1) 0 -1px 1px inset;
}
deboss-box-deep()

凸ボックス（emboss-box）

少し飛び出たボックスをシャドウとハイライトで表現

この例では右上からの光源を想定

  • 光源とは逆方向（左下・外側）に影：alpha 0.05 のぼかし、0 の box-shadow
  • 光源の方向（右上・内側）にハイライト：alpha 0.5 のぼかし、0 の box-shadow
  • ボックスの周りに、黒い alpha 0.15 の線
  • 影・ハイライトともに、背景の色と比較して色を薄くする
  • ソリッドな物質感を表現するためにぼかしは影、ハイライトともに 0
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) {
  border: 1px solid rgba(0, 0, 0, $border);
  @include box-shadow(rgba(0, 0, 0, $shadow) -1px 1px 0, rgba(255, 255, 255, $highlight) -1px 1px 0 inset);
}

使用例

.emboss {
  @include emboss-box($border: .1, $shadow: .03, $highlight: .5);
}

//コンパイル後  
.emboss {
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: rgba(0, 0, 0, 0.03) -1px 1px 0, rgba(255, 255, 255, 0.5) -1px 1px 0 inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.03) -1px 1px 0, rgba(255, 255, 255, 0.5) -1px 1px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.03) -1px 1px 0, rgba(255, 255, 255, 0.5) -1px 1px 0 inset;
}
emboss-box()

もう少しあからさまに飛び出させたボックスの例。

@mixin emboss-box-high($depth: 1px, $shadow: .3, $highlight: .3) {
  @include box-shadow(rgba(0, 0, 0, $shadow) 1px 1px $depth, -1px 0 $depth rgba(0, 0, 0, $shadow),  rgba(255, 255, 255, $highlight) 0 -1px $depth );
}

$depth: 凸の高さ（英語がおかしいけど）
$shadow: 影の値（透明度）
$highlight:ハイライトの値（透明度）

使用例

.emboss_high {
  @include emboss-box-high();
}

//コンパイル後
.emboss_high {
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px, -1px 0 1px rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3) 0 -1px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px, -1px 0 1px rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3) 0 -1px 1px;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px, -1px 0 1px rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3) 0 -1px 1px;
}
emboss-box-high()

参考にさせていただいたサイト：ズルいデザイン（3）/ @IT

立体的なボタン

クリックすると凹むボタンの例。前述のあからさまに凹んだボックスとあからさまに飛び出させたボックスを利用。（ボタンの設定については「ボタン」参照）

@mixin emboss-deboss-button($color: #f8f8f8, $font-size: 16px, $text-color: #666, $border-radius: 4px, $depth: 1px, $shadow: .3, $highlight: .3) {
  display: inline-block;
  background-origin: border-box;
  position: relative;
  cursor: pointer;
  text-align: center;
  font-size: $font-size;
  background: $color;
  padding: 0 ($font-size * 2);
  height: $font-size * 3;
  line-height: $font-size * 3;
  color: $text-color;
  @include border-radius($border-radius);
  @include box-shadow(rgba(0, 0, 0, $shadow) 1px 1px $depth, -1px 0 $depth rgba(0, 0, 0, $shadow),  rgba(255, 255, 255, $highlight) 0 -1px $depth );
  &:active {
    background: adjust-lightness($color,  -3%);
    color: lighten($text-color, 5%);
    @include box-shadow(rgba(0,0,0,$shadow) 1px 1px $depth inset, -1px 0 $depth rgba(0, 0, 0, $shadow) inset,rgba(255,255,255,$highlight) 0 -1px $depth inset);
  }
}

使用例

.emboss-deboss-button {
  @include emboss-deboss-button();
}

//コンパイル後
.emboss-deboss-button {
  display: inline-block;
  background-origin: border-box;
  position: relative;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  background: #f8f8f8;
  padding: 0 32px;
  height: 48px;
  line-height: 48px;
  color: #666666;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px, -1px 0 1px rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3) 0 -1px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px, -1px 0 1px rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3) 0 -1px 1px;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px, -1px 0 1px rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3) 0 -1px 1px;
}
.emboss-deboss-button:active {
  background: #f0f0f0;
  color: #737373;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px inset, -1px 0 1px rgba(0, 0, 0, 0.3) inset, rgba(255, 255, 255, 0.3) 0 -1px 1px inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px inset, -1px 0 1px rgba(0, 0, 0, 0.3) inset, rgba(255, 255, 255, 0.3) 0 -1px 1px inset;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px inset, -1px 0 1px rgba(0, 0, 0, 0.3) inset, rgba(255, 255, 255, 0.3) 0 -1px 1px inset;
}

HTML

<p><a class="emboss-deboss-button">Button</a></p>

Button

テキストシャドウ

浅く彫り込んであるように見えるテキストシャドウ

text-shadow(横オフセット, 縦オフセット, ブラー,色)

濃い背景色に白抜き文字の場合

光源とは逆方向に向かって、黒い影を付け、透明度は背景色の濃さに応じて調整。

//濃い背景色＋白抜き文字のテキストシャドウ（黒いシャドウ）
@mixin ts-light-char($op : .4){
  text-shadow: 1px -1px rgba(0, 0, 0, $op);
}

薄い背景色に濃い色の文字の場合

光源と同じ方向に向かって、白いハイライトを付け、透明度は背景色の濃さに応じて調整。

//薄い背景色＋濃い色の文字のテキストシャドウ（白いシャドウ）
@mixin ts-dark-char($op : .7){
  text-shadow: -1px 1px rgba(255, 255, 255, $op);
}

使い方

.foo {
  @include ts-dark-char($op : 1);
}

//コンパイル後
.foo {
  text-shadow: -1px 1px rgba(255, 255, 255, 1);
}

参考にさせていただいたサイト：ズルいデザイン（1）/ @IT

線形グラデーション

垂直方向の線形グラデーション（単色）のミックスイン

下（bottom）を指定した色にする場合

$color: 色の指定
$adjust: 正の値を指定すると上が明るく、負の値を指定すると上が暗くなる。

@mixin gradient-vertical-bottom($color:#666, $adjust:10%){
  background-color: $color;
  @include filter-gradient(adjust-lightness($color, $adjust), $color, vertical);
  @include background-image(linear-gradient(adjust-lightness($color,  $adjust) 0%, $color 100%));
}
@include filter-gradient()
コンパスのミックスイン
filter-gradient(開始色, 終了色, 方向)
詳細は「Compass のミックスイン」参照
adjust-lightness()
コンパスのヘルパー関数
adjust-lightness($color, $amount)
詳細は「Compass のミックスイン」参照
@include background-image()
コンパスのミックスイン
background-image(linear-gradient(値));
詳細は「Compass のミックスイン」参照

デフォルトでの指定例

.bottom {
  @include gradient-vertical-bottom();
}

//コンパイル結果
.bottom {
  background-color: #666666;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF808080', endColorstr='#FF666666');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #808080), color-stop(100%, #666666));
  background-image: -webkit-linear-gradient(#808080 0%, #666666 100%);
  background-image: -moz-linear-gradient(#808080 0%, #666666 100%);
  background-image: -o-linear-gradient(#808080 0%, #666666 100%);
  background-image: linear-gradient(#808080 0%, #666666 100%);
}

（以下のサンプルの背景は値に 30% を指定したもの）

gradient-vertical-bottom();

上（top）を指定した色にする場合

$color: 色の指定
$adjust: 正の値を指定すると上が明るく、負の値を指定すると上が暗くなる。

@mixin gradient-vertical-top($color:#666, $adjust:10%){
  background-color: $color;
  @include filter-gradient($color, adjust-lightness($color, $adjust), vertical);
  @include background-image(linear-gradient($color 0%, adjust-lightness($color,  $adjust) 100%));
}

デフォルトでの指定例

.top {
  @include gradient-vertical-top();
}

//コンパイル結果
.top {
  background-color: #666666;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF666666', endColorstr='#FF808080');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #808080));
  background-image: -webkit-linear-gradient(#666666 0%, #808080 100%);
  background-image: -moz-linear-gradient(#666666 0%, #808080 100%);
  background-image: -o-linear-gradient(#666666 0%, #808080 100%);
  background-image: linear-gradient(#666666 0%, #808080 100%);
}

（以下のサンプルの背景は値に 30% を指定したもの）

gradient-vertical-top();

中間を指定した色にする場合

$color: 色の指定
$top: 上の色調整（値が大きいほど明るくなる）
$bottom: 下の色調整（値が大きいほど暗くなる）
$reverse: true を指定すると上下の色の調整が逆になる

@mixin gradient-vertical-middle($color:#666, $top:10%, $bottom:10%, $reverse:false){
  background-color: $color;
  @if $reverse == true {
    @include filter-gradient(scale-lightness($color, -$top), scale-lightness($color, $bottom), vertical);
    @include background-image(linear-gradient(scale-lightness($color,  -$top) 0%, scale-lightness($color, $bottom) 100%));
  }@else{
    @include filter-gradient(scale-lightness($color, $top), scale-lightness($color, -$bottom), vertical);
    @include background-image(linear-gradient(scale-lightness($color,  $top) 0%, scale-lightness($color, -$bottom) 100%));
  } 
}
scale-lightness()
コンパスのヘルパー関数
scale-lightness($color, $amount)
詳細は「Compass のミックスイン」参照

デフォルトでの指定例

.middle {
  @include gradient-vertical-middle();
}

//コンパイル結果
.middle {
  background-color: #666666;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF757575', endColorstr='#FF5C5C5C');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #757575), color-stop(100%, #5c5c5c));
  background-image: -webkit-linear-gradient(#757575 0%, #5c5c5c 100%);
  background-image: -moz-linear-gradient(#757575 0%, #5c5c5c 100%);
  background-image: -o-linear-gradient(#757575 0%, #5c5c5c 100%);
  background-image: linear-gradient(#757575 0%, #5c5c5c 100%);
}
gradient-vertical-middle();

$reverse:true を指定した例

.middle2 {
  @include gradient-vertical-middle($reverse:true);
}

//コンパイル結果
.middle2 {
  background-color: #666666;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5C5C5C', endColorstr='#FF757575');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #757575));
  background-image: -webkit-linear-gradient(#5c5c5c 0%, #757575 100%);
  background-image: -moz-linear-gradient(#5c5c5c 0%, #757575 100%);
  background-image: -o-linear-gradient(#5c5c5c 0%, #757575 100%);
  background-image: linear-gradient(#5c5c5c 0%, #757575 100%);
}
gradient-vertical-middle($reverse:true);

参考にさせていただいたサイト：ズルいデザイン（2）/ @IT

ボタン

汎用的（？）なボタンのミックスイン

@mixin button($color: #48B1F2, $font-size: 16px, $text-color: white,  $hover: 5%, $gradient: 5%, $border-radius: 4px, $font-weight: bold, $gradient_reverse: false) {
  display: inline-block;
  background-origin: border-box;
  position: relative;
  cursor: pointer;
  font-weight: $font-weight;

  @include ts-light-char(.1);
  
  @if $gradient_reverse == true {
      @include gradient-vertical-top($color, $gradient);
  } @else {
      @include gradient-vertical-bottom($color, $gradient);
  }
  
  @include border-radius($border-radius);
  @include emboss-box($border: .1, $shadow: .1, $highlight: .2);
  color: rgba($text-color, .9);
  text-align: center;
  font-size: $font-size;
  padding: 0 ($font-size * 2);
  height: $font-size * 3;
  line-height: $font-size * 3;
  i {
    font-size: 130%;
    margin-right: 5px; 
    color: rgba($text-color, .5);
  }
  &:hover {
    background: adjust-lightness($color,  $hover);
    text-decoration: none;
    color: $text-color;
    i {
      color: $text-color;
    }
  }
  &:active {
    @include rotate(5deg);
  }
}

パラメータ

  • $color: ボタンの色
  • $font-size: フォントサイズ（この大きさによりボタンの大きさが決まる）
  • $text-color: テキストの色
  • $hover: ホバー時の色の変化の割合（負の値を指定すると暗くなる）
  • $gradient: グラデーションの変化の割合（正の値：上が明るい。負の値：上が暗い）
  • $border-radius: 角丸の値
  • $font-weight: テキストが太字か普通か
  • $gradient_reverse: true を指定するとグラデーションの向きを逆にする

独自のミックスイン

@include ts-light-char();
@include gradient-vertical-top();
@include gradient-vertical-bottom();
@include emboss-box();

@include rotate()
コンパスのミックスイン
rotate(回転角度);
詳細は「Compass のミックスイン」参照
display: inline-block
ボタンのサイズを文字サイズと比例して変えられるようにするための指定
background-origin: border-box
背景色の塗り範囲を border まで含めるためのもの。この指定により半透明の border の囲みが背景色になじんだ色になる
  • テキストの色：変数で指定した $text-color を透明度 0.9 で描画
  • 上下の padding：上下の高さをheightで指定するため、上下のpaddingは 0
  • 左右のpadding ：文字サイズの２倍
  • height と line-height：文字サイズの３倍に指定
  • 高さの調節に padding を利用しないのは、font-awesome のアイコンフォント利用時でも同じ高さに統一するため
  • hover 時：変数で指定した $color を 変数 $hover で明るくする
  • hover 時のテキスト：$text-color の透明度を１に（通常は透明度 0.9 ）
  • active 時：ボタンを5度回転させる
  • i 要素：アイコンのサイズを font-size: 130% としてテキストのサイズよりも大きくしてバランスを整える
  • アイコンとテキストの間を確保するため、右マージンを指定
  • アイコンの色は、$text-color で指定した色の透明度 0.5 で適用。これにより、テキストの内容が目立ちアイコンとのバランスがよくなる
  • またテキストのベースラインに沿ってアイコンも表示されるので、テキストよりも少しサイズが大きいアイコンは、ボタンの上の方に寄って見えてしまうので、top: 2px を position: relative と併せて指定

使用例

.my_button {
  @include button();
}

.my_button2 {
  @include button($color: #aaa, $font-size: 14px, $text-color:#fff, $hover: 6%, $gradient: 20%, $border-radius: 21px, $font-weight: normal);
}

//HTML
<p><a class="my_button"><i class="icon-circle-arrow-right"></i> button</a></p>

<p><a class="my_button2"><i class="icon-cog"></i> button</a></p>

コンパイル結果

.my_button {
  display: inline-block;
  background-origin: border-box;
  position: relative;
  cursor: pointer;
  font-weight: bold;
  text-shadow: 1px -1px rgba(0, 0, 0, 0.1);
  background-color: #48b1f2;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF60BBF4', endColorstr='#FF48B1F2');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #60bbf4), color-stop(100%, #48b1f2));
  background-image: -webkit-linear-gradient(#60bbf4 0%, #48b1f2 100%);
  background-image: -moz-linear-gradient(#60bbf4 0%, #48b1f2 100%);
  background-image: -o-linear-gradient(#60bbf4 0%, #48b1f2 100%);
  background-image: linear-gradient(#60bbf4 0%, #48b1f2 100%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-size: 16px;
  padding: 0 32px;
  height: 48px;
  line-height: 48px;
}
.my_button i {
  font-size: 130%;
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.5);
}
.my_button:hover {
  background: #60bbf4;
  text-decoration: none;
  color: white;
}
.my_button:hover i {
  color: white;
}
.my_button:active {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}

Button

Button

参考にさせていただいたサイト：ズルいデザイン（4）/ @IT