Compassメモ（Colorヘルパー関数、ImageDimensionヘルパー関数）
Compass で使える、色関係を計算してくれるColorヘルパー関数と、 画像サイズを計算してくれるImageDimensionヘルパー関数についてまとめておく。
Colorヘルパー関数
Colorヘルパー関数は、色関係を計算してくれる便利な関数がある。
Compass Color Helpers | Compass Documentation
adjust-lightness($color, $amount) と scale-lightness($color, $amount)
$color の明るさ(lightness)を$amount で調整できる。 Sass のlighten(), darken() に近い。
Sass
$color1: red;
.adjust-l-red {
background-color: adjust-lightness($color1, 20%);
}
.scale-l-red {
background-color: scale-lightness($color1, 20%);
}
.light-red {
background-color: lighten($color1, 20%);
}
CSS
.adjust-l-red {
background-color: #ff6666;
}
.scale-l-red {
background-color: #ff3333;
}
.light-red {
background-color: #ff6666;
}
カラー確認
red
adjust-lightness(red, 20%)
scale-lightness(red, 20%)
lighten(red, 20%)
adjust-saturation($color, $amount) と scale-saturation($color, $amount)
$color の彩度(saturation)を$amount で調整できる。 Sass のsaturate(), desaturate() に近い。
Sass
$color2: skyblue;
.adjust-s-sky {
background-color: adjust-saturation($color2, 20%);
}
.scale-s-sky {
background-color: scale-saturation($color2, 20%);
}
.saturate-sky {
background-color: saturate($color2, 20%);
}
CSS
.adjust-s-sky {
background-color: #79d4f9;
}
.scale-s-sky {
background-color: #83d0ef;
}
.saturate-sky {
background-color: #79d4f9;
}カラー確認
skyblue
adjust-saturation(skyblue, 20%)
scale-saturation(skyblue, 20%)
saturate(skyblue, 20%)
shade($color, $percentage)
$color に黒を$percentage分加えて暗くする。
Sass
// shade
$color3: gray;
.shade-gray {
background-color: shade($color3, 20%);
}
.dark-gray {
background-color: darken($color3, 20%);
}
CSS
.shade-gray {
background-color: #666666;
}
.dark-gray {
background-color: #4d4d4d;
}
カラー確認
gray
shade(gray, 20%)
darken(gray, 20%)
tint($color, $percentage)
$color に白を$percentage分加えて明るくする。
Sass
// tint
.tint-gray {
background-color: tint($color3, 20%);
}
.light-gray {
background-color: lighten($color3, 20%);
}
CSS
.tint-gray {
background-color: #999999;
}
.light-gray {
background-color: #b3b3b3;
}
カラー確認
gray
tint(gray, 20%)
lighten(gray, 20%)
Image Dimensionヘルパー関数
image-width($image), image-height($image) 関数を使うことで、 画像のサイズを取得できる。
Compass Image Dimension Helpers | Compass Documentation
Sass
$padding: 10px;
$image: '200x200.png';
.sample {
width: image-width($image) + ($padding * 2);
}
CSS
.sample {
width: 220px;
}
まとめ
Compassのヘルパー関数は、他にも数学関係のMathなどが便利なものがいろいろあります。
Compass Helpers | Compass Documentation
参考リンク
