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