mixin、変数などの便利な記述
変数などの呼び出し方
// 変数
$_defaultColor: #555555;
↓
html {
color: $_defaultColor;
}
// mixin
@mixin buttonBgBlackAndWhiteGradient {
@include background-image(linear-gradient(#fafbfb, #fafbfb 10%, #f7f7f9 43%, #ebebeb 72%, #f3f1f1));
}
↓
body {
@include buttonBgBlackAndWhiteGradient;
}
/import
@import 'partial-general/bg';
// 実際のファイル名は、 bg.scss。なんだけど、 と .scss は省ける。
グラデーション
グラデーションを簡単にするmixinです。
明るい色から暗い色へ上下に変化する。
グラデの明るい色と暗い色の2つを指定するのはとても面倒なので、
暗い色の1色だけを()内で指定して、明るい色はlightenで指定します。
指定した色をどのくらい明るくするかパーセントで記述すれば1色だけの指定で済むので便利。
逆にdarkenを使用して明るい色をどのくらい暗くするかを指定するのでもOK。
一番最初にbackground-colorを指定しているのはグラデが使えないIE用の指定になる。
@mixin gradient-top-lighten($color:#E8E8E8, $lighten:7%){
background-color: $color;
@include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}
.selecta {
@include gradient-top-lighten(#EEE, 3%);
}
フォントサイズ
相対指定の%やemを使用する場合、
親要素を継承しないCSS3のrem指定使ったフォントサイズを指定するためのmixin。
※IE8以下では使用できないのでpx指定も記述する必要がある。
@mixin font-size($size, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}
.selecta {
@include font-size(14);
}
角丸
border-radiusはmixinで指定しなくてもincludeできるが、
数字を指定する時に(3px)などとpxを指定する必要があったので()内でpxを省いて数字だけ入力できるmixin。
※50%というようなパーセント指定をしたい場合はこのmixinを使わない!
@mixin border-radius($radius) {
-moz-border-radius: $radius + px;
-webkit-border-radius: $radius + px;
-o-border-radius: $radius + px;
-ms-border-radius: $radius + px;
border-radius: $radius + px;
}
.selecta {
@include border-radius(3);
}
変数
主にカラーなどを指定
カラーの指定は各自でカラーコードを入れておく。
$black:#333;
$white:#FFF;
$gray:#666;
$green:#4C9020;
$blue:#0467AF;
$pink:#DF5291;
$yellow:#E1930F;
$orange:#D5530A;
.selecta {
color: $gray;
}