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

unittrim($number) ※独自関数

単位をのぞいた数値を返します。
参照元

関数定義

sass

@function unittrim($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

sass

$num: 100px + 100px;
.example {
  content: unittrim($num);
}

css

.example {
  content: 200;
}

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