【Compass】 mixin、変数などの便利な記述

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;
}