はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

Compassメモ(Colorヘルパー関数、ImageDimensionヘルパー関数)

Compassメモ(Colorヘルパー関数、ImageDimensionヘルパー関数)

Compass で使える、色関係を計算してくれるColorヘルパー関数と、 画像サイズを計算してくれるImageDimensionヘルパー関数についてまとめておく。

Compass Color Helper

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

広告を非表示にする