第8章 全機能Sassリファレンス
8-7 関数一覧
■RGB形式の色を操作する関数
・rgb($red, $green, $blue)
10進数または%指定のRGB値を16進数のRGB値に変換します。
---------------------
▼Sass
.example {
color: rgb(100,254,10);
color: rgb(10%,5%,72%);
}
------
▼CSS（コンパイル後）
.example {
color: #64fe0a;
color: #190cb7;
}
---------------------
・rgba($red, $green, $blue, $alpha)
RGBA値を10進数のRGBA値に変換します。CSSだと透明度付きの場合16進数で指定できませんが、16進数のRGB値を指定しても10進数に変換してくれます。また、キーワードも変換してくれます。
---------------------
▼Sass
.example {
color: rgba(100,254,10,.5);
color: rgba(10%,5%,10,.8);
color: rgba(red,.7);
color: rgba(#132,.2);
}
------
▼CSS（コンパイル後）
.example {
color: rgba(100, 254, 10, 0.5);
color: rgba(25, 12, 10, 0.8);
color: rgba(255, 0, 0, 0.7);
color: rgba(17, 51, 34, 0.2);
}
---------------------
・red($color)
16進数のRGB値のR値（赤）を返します。
---------------------
▼Sass
.example {
property: red(#4c61a8);
}
------
▼CSS（コンパイル後）
.example {
property: 76;
}
---------------------
・green($color)
16進数のRGB値のG値（緑）を返します。
---------------------
▼Sass
.example {
property: green(#4c61a8);
}
------
▼CSS（コンパイル後）
.example {
property: 97;
}
---------------------
・blue($color)
16進数のRGB値のB値（青）を返します。
---------------------
▼Sass
.example {
property: blue(#4c61a8);
}
------
▼CSS（コンパイル後）
.example {
property: 168;
}
---------------------
・mix($color-1, $color-2, [$weight])
2つの色を混ぜて中間色が作れます。
---------------------
▼Sass
.example {
background: mix(#000, #fff, 50%);
}
------
▼CSS（コンパイル後）
.example {
background: #7f7f7f;
}
---------------------
■HSL形式の色を操作する関数
・hsl($hue, $saturation, $lightness)
HSL形式の値を16進数のRGB値に変換します。
---------------------
▼Sass
.example {
color: hsl(127, 92%, 39%);
}
------
▼CSS（コンパイル後）
.example {
color: #08bf1d;
}
---------------------
・hsla($hue, $saturation, $lightness, $alpha)
HSLA形式の値をRGBA値に変換します。
---------------------
▼Sass
.example {
color: hsla(268, 64%, 43%, 0.83);
}
------
▼CSS（コンパイル後）
.example {
color: rgba(105, 39, 180, 0.83);
}
---------------------
・hue($color)
HSL形式からhue値（色相）を返します。
---------------------
▼Sass
.example {
property: hue(hsl(268, 64%, 43%));
}
------
▼CSS（コンパイル後）
.example {
property: 268deg;
}
---------------------
・saturation($color)
HSL形式からsaturation値（彩度）を返します。
---------------------
▼Sass
.example {
property: saturation(hsl(268, 64%, 43%));
}
------
▼CSS（コンパイル後）
.example {
property: 64%;
}
---------------------
・lightness($color)
HSL形式からlightness値（明度）を返します。
---------------------
▼Sass
.example {
property: lightness(hsl(268, 64%, 43%));
}
------
▼CSS（コンパイル後）
.example {
property: 43%;
}
---------------------
・adjust-hue($color, $degrees)
指定した色のhue値（色相）の角度を変更します。
---------------------
▼Sass
.example {
color: adjust-hue(hsl(268, 60%, 40%), 30deg);
color: adjust-hue(#556ac4, 50deg);
color: adjust-hue(blue, 50deg);
}
------
▼CSS（コンパイル後）
.example {
color: #9f29a3;
color: #9d55c4;
color: #d400ff;
}
---------------------
・lighten($color, $amount)
指定した色の明度を上げて明るくします。
---------------------
▼Sass
.example {
color: lighten(hsl(123, 60%, 40%), 10%);
color: lighten(#556ac4, 15%);
color: lighten(black, 50%);
}
------
▼CSS（コンパイル後）
.example {
color: #33cc3b;
color: #8e9cd8;
color: gray;
}
---------------------
・darken($color, $amount)
指定した色の明度を下げて暗くします。
---------------------
▼Sass
.example {
color: darken(hsl(123, 60%, 40%), 10%);
color: darken(#556ac4, 15%);
color: darken(white, 70%);
}
------
▼CSS（コンパイル後）
.example {
color: #1f7a23;
color: #354798;
color: #4d4d4d;
}
---------------------
・saturate($color, $amount)
指定した色の彩度を上げます。
---------------------
▼Sass
.example {
color: saturate(hsl(123, 60%, 40%), 10%);
color: saturate(#556ac4, 15%);
color: saturate(#932, 10%);
}
------
▼CSS（コンパイル後）
.example {
color: #1fad26;
color: #445fd5;
color: #a22c19;
}
---------------------
・desaturate($color, $amount)
指定した色の彩度を下げます。
---------------------
▼Sass
.example {
color: desaturate(hsl(123, 60%, 40%), 10%);
color: desaturate(#556ac4, 15%);
color: desaturate(#932, 10%);
}
------
▼CSS（コンパイル後）
.example {
color: #339938;
color: #6675b3;
color: #903a2b;
}
---------------------
・grayscale($color)
指定した色をグレースケールに変換します。
---------------------
▼Sass
.example {
color: grayscale(hsl(123, 60%, 40%));
color: grayscale(#556ac4);
color: grayscale(red);
}
------
▼CSS（コンパイル後）
.example {
color: #666666;
color: #8d8d8d;
color: gray;
}
---------------------
・complement($color)
指定した色の補色（※）を返します。
※色相環 で正反対に位置する関係の色の組合せ。【07_complementary_color.gif】
---------------------
▼Sass
.example {
color: complement(hsl(123, 60%, 40%));
color: complement(#556ac4);
color: complement(blue);
}
------
▼CSS（コンパイル後）
.example {
color: #a3299d;
color: #c4af55;
color: yellow;
}
---------------------
・invert($color)
指定した色を反転します。
---------------------
▼Sass
.example {
color: invert(hsl(123, 60%, 40%));
color: invert(#556ac4);
color: invert(green);
}
------
▼CSS（コンパイル後）
.example {
color: #d65cd0;
color: #aa953b;
color: #ff7fff;
}
---------------------
■透明度を操作する関数
・alpha($color) / opacity($color)
指定した色の透明度を返します。また、alpha() は、マイクロソフト独自の alpha(opacity=30) をサポートしているため、エラーになりません。
---------------------
▼Sass
.example {
property: alpha(hsla(123, 60%, 40%, .9));
property: opacity(rgba(20,25,30, .4));
property: alpha(opacity=30);
}
------
▼CSS（コンパイル後）
.example {
property: 0.9;
property: 0.4;
property: alpha(opacity=30);
}
---------------------
・rgba($color, $alpha)
あらゆる色の透明度を変更します。この関数は、RGB形式の色を操作する関数と同じです。
---------------------
▼Sass
.example {
color: rgba(#68ac49, .9);
color: rgba(20,25,30,.4);
color: rgba(purple, .2);
}
------
▼CSS（コンパイル後）
.example {
color: rgba(104, 172, 73, 0.9);
color: rgba(20, 25, 30, 0.4);
color: rgba(128, 0, 128, 0.2);
}
---------------------
・opacify($color, $amount) / fade-in($color, $amount)
指定した色の透明度を下げてより不透明にします。不透明にした結果、値が1以上になった場合は、RGB形式で返します。
---------------------
▼Sass
.example {
color: opacify(rgba(20,25,30,0.4), 0.2);
color: fade-in(hsla(268, 64%, 43%, 0.83), 0.2);
}
------
▼CSS（コンパイル後）
.example {
color: rgba(20, 25, 30, 0.6);
color: #6927b4;
}
---------------------
・transparentize($color, $amount) / fade-out($color, $amount)
指定した色の透明度を上げてより透明にします。
---------------------
▼Sass
.example {
color: transparentize(rgba(20,25,30,0.4), 0.2);
color: transparentize(white, 0.5);
color: fade-out(hsla(268, 64%, 43%, 0.83), 0.3);
}
------
▼CSS（コンパイル後）
.example {
color: rgba(20, 25, 30, 0.2);
color: rgba(255, 255, 255, 0.5);
color: rgba(105, 39, 180, 0.53);
}
---------------------
■その他の色を調整する関数
・adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
RGB,hue,彩度,明度...あらゆる色の値を一度に調整出来ます。
指定できる値は、次の7種類になります。
$red
$green
$blue
$hue
$saturation
$lightness
$alpha
---------------------
▼Sass
.example {
color: adjust-color(#102030, $blue: 5, $alpha: -0.2);
color: adjust-color(green, $red: -5, $blue: 5);
color: adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4);
}
------
▼CSS（コンパイル後）
.example {
color: rgba(16, 32, 53, 0.8);
color: #008005;
color: rgba(255, 106, 0, 0.6);
}
---------------------
・scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
現在の値から最大値までの変化の割合を指定して操作します。指定できる値は、adjust-color() と同じです。
---------------------
▼Sass
.example {
color: scale-color(hsl(120, 70, 80), $lightness: 50%);
color: scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%);
color: scale-color(hsl(200, 70, 80), $saturation: -90%, $alpha: -30%);
}
------
▼CSS（コンパイル後）
.example {
color: #d4f7d4;
color: #c85ae5;
color: rgba(200, 205, 208, 0.7);
}
---------------------
・change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
指定した色の値を変更出来ます。指定できる値は、adjust-color() と同じです。
---------------------
▼Sass
.example {
color: change-color(#000, $blue: 5);
color: change-color(green, $red: 51, $blue: 5);
color: change-color(hsl(25, 100%, 80%), $alpha: 0.4);
}
------
▼CSS（コンパイル後）
.example {
color: #000005;
color: #338005;
color: rgba(255, 196, 153, 0.4);
}
---------------------
・ie-hex-str($color)
指定した色を、IE独自実装のfilterプロパティで利用できる形式に変換します。
---------------------
▼Sass
.example {
color: ie-hex-str(#000);
color: ie-hex-str(green);
color: ie-hex-str(rgba(125, 20, 60, .4));
}
------
▼CSS（コンパイル後）
.example {
color: #FF000000;
color: #FF008000;
color: #667D143C;
}
---------------------
■文字列を操作する関数
・unquote($string)
文字列からクォーテーションを取り除きます。
---------------------
▼Sass
.example {
background-image: url(unquote("img/mark.png"));
}
------
▼CSS（コンパイル後）
.example {
background-image: url(img/mark.png);
}
---------------------
・quote($string)
文字列にクォーテーションを追加します。
---------------------
▼Sass
.example:after {
content: quote(impress);
}
------
▼CSS（コンパイル後）
.example:after {
content: "impress";
}
---------------------
■数値を操作する関数
・percentage(value)
指定した数値をパーセント形式に変換します。
---------------------
▼Sass
.example {
width: percentage(100px / 80px);
}
------
▼CSS（コンパイル後）
.example {
width: 125%;
}
---------------------
・round($value)
指定した数値を四捨五入した値を返します。
---------------------
▼Sass
.example {
margin: round(10.25px);
padding: round(15.7px);
}
------
▼CSS（コンパイル後）
.example {
margin: 10px;
padding: 16px;
}
---------------------
・ceil($value)
指定した数値の切り上げをした値を返します。
---------------------
▼Sass
.example {
margin: ceil(10.25px);
padding: ceil(15.7px);
}
------
▼CSS（コンパイル後）
.example {
margin: 11px;
padding: 16px;
}
---------------------
・floor($value)
指定した数値の切り捨てをした値を返します。
---------------------
▼Sass
.example {
margin: floor(10.25px);
padding: floor(15.7px);
}
------
▼CSS（コンパイル後）
.example {
margin: 10px;
padding: 15px;
}
---------------------
・abs($value)
指定した数値の絶対値を返します。
---------------------
▼Sass
.example {
margin-top: abs(-100px);
}
------
▼CSS（コンパイル後）
.example {
margin-top: 100px;
}
---------------------
・min($x1, $x2, c)
指定した複数の値のうち、最小値を返します。
---------------------
▼Sass
.example {
margin: min(10px, 4px, 120px, 8px);
padding: min(1.2cm, 6cm, 50px);
}
------
▼CSS（コンパイル後）
.example {
margin: 4px;
padding: 1.2cm;
}
---------------------
・max($x1, $x2, c)
指定した複数の値のうち、最大値を返します。
---------------------
▼Sass
.example {
margin: max(10px, 4px, 120px, 8px);
padding: max(1.2cm, 6cm, 50px);
}
------
▼CSS（コンパイル後）
.example {
margin: max(10px, 4px, 120px, 8px);
padding: max(1.2cm, 6cm, 50px);
}
---------------------
■リストを操作する関数
・length($list)
指定したリストの項目数（半角スペースで区切られた数）を返します。
---------------------
▼Sass
.example {
property: length(10px auto);
property: length(15px);
property: length(1px solid white);
}
------
▼CSS（コンパイル後）
.example {
property: 2;
property: 1;
property: 3;
}
---------------------
・nth($list, $n)
指定したリストの内、N番目にある値を返します。
---------------------
▼Sass
.example {
property: nth(10px auto, 1);
property: nth(1px 2px 5px 10px, 3);
property: nth(1px solid white, 3);
}
------
▼CSS（コンパイル後）
.example {
property: 10px;
property: 5px;
property: white;
}
---------------------
・join($list1, $list2, [$separator])
2つのリストを一つに結合します。
---------------------
▼Sass
.example {
property: join(10px, 5px);
property: join(1px 2px 5px , 30%);
property: join(0 10 255, 0.5, comma);
property: join(0 10 255, 0.5, space);
}
------
▼CSS（コンパイル後）
.example {
property: 10px 5px;
property: 1px 2px 5px 30%;
property: 0, 10, 255, 0.5;
property: 0 10 255 0.5;
}
---------------------
・append($list1, $val, [$separator])
リストの最後に単一の値を追加します。
---------------------
▼Sass
$font: arial, helvetica;
.example {
font-family: append($font, sans-serif, comma);
}
------
▼CSS（コンパイル後）
.example {
font-family: arial, helvetica, sans-serif;
}
---------------------
・zip($list1, $list2, c)
複数のリストを、一つの多次元リストに統合します。
---------------------
▼Sass
$shadow_x: 0 1px 5px;
$shadow_y: 1px 3px -5px;
$shadow_grd: 3px 5px 33px;
$shadow_color: #222 white red;
.example {
text-shadow: zip($shadow_x, $shadow_y, $shadow_grd, $shadow_color);
}
------
▼CSS（コンパイル後）
.example {
text-shadow: 0 1px 3px #222222, 1px 3px 5px white, 5px -5px 33px red;
}
---------------------
・index($list, $value)
リストの中のある値を見つけ出しそのインデックスを返します。値がない場合はfalseを返します。
---------------------
▼Sass
.example {
property: index(1px 0 3px white, white);
property: index(5px 10px 15px, 20px);
}
------
▼CSS（コンパイル後）
.example {
property: 4;
property: false;
}
---------------------
■内部的な値を確認する関数
・type-of($value)
変数のデータタイプを返します。
---------------------
▼Sass
.example {
property: type-of(white);
property: type-of("");
property: type-of(null);
property: type-of(5px);
property: type-of(false);
property: type-of(おはよう);
}
------
▼CSS（コンパイル後）
.example {
property: color;
property: string;
property: null;
property: number;
property: bool;
property: string;
}
---------------------
・unit($number)
指定した数値に関連した単位を返します。
---------------------
▼Sass
.example {
property: unit(5);
property: unit(50em);
property: unit(10%);
property: unit(5cm * 2px);
}
------
▼CSS（コンパイル後）
.example {
property: "";
property: "em";
property: "%";
property: "cm*px";
}
---------------------
・unitless($number)
指定した数値に単位があるかどうかを返します。単位の有無に寄って「true」か「faluse」を返します。
---------------------
▼Sass
.example {
property: unitless(123);
property: unitless(50px);
property: unitless(99%);
}
------
▼CSS（コンパイル後）
.example {
property: true;
property: false;
property: false;
}
---------------------
・comparable($number-1, $number-2)
指定した2つの数値が、比較・追加可能かどうかを返します。
---------------------
▼Sass
.example {
property: comparable(123, 5px);
property: comparable(50px, 10cm);
property: comparable(20%, 5em);
}
------
▼CSS（コンパイル後）
.example {
property: true;
property: true;
property: false;
}
---------------------
■条件に応じて値を出し分ける関数
・if($condition, $if-true, $if-false)
$conditionの条件が、真なら $if-true の値を、偽なら $if-false の値を返します。
---------------------
▼Sass
.example {
property: if(true, 1px, 2px);
property: if(false, 1px, 2px);
property: if(comparable(2px, 1px),red, blue);
property: if(comparable(20%, 10px),red, blue);
}
------
▼CSS（コンパイル後）
.example {
property: 1px;
property: 2px;
property: red;
property: blue;
}
---------------------