Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@yuusuke510(yusuke goto)in株式会社D2C ID

【備忘録】sass関数一覧

Last updated at Posted at 2020-03-27

■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;
}
4
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?