Sassの関数を使ってみる

2019.04.28

個人的に使いそうなものを中心に、Sassの関数をいくつか試してみます。

色関連

rgb($red, $green, $blue)

RGB値から色を作成します。

Sass

.sample {
  color: rgb(100, 100, 100);
}

CSS

.sample {
  color: #646464;
}

rgba($red, $green, $blue, $alpha)

RGBA値から色を作成します。
rgba($color, $alpha) のようにして16進数のRGB値でも指定可能。

Sass

.sample {
  color: rgba(100, 100, 100, 0.8);
  background-color: rgba(#ff0000, 0.8);
}

CSS

.sample {
  color: rgba(100, 100, 100, 0.8);
  background-color: rgba(255, 0, 0, 0.8);
}

red($color)

指定した色のRGB値のR値を返します。

Sass

.sample {
  color: rgba(red(#646464), 0, 0, 0.8);
}

CSS

.sample {
  color: rgba(100, 0, 0, 0.8);
}

green($color)

指定した色のRGB値のG値を返します。

Sass

.sample {
  color: rgba(0, green(#646464), 0, 0.8);
}

CSS

.sample {
  color: rgba(0, 100, 0, 0.8);
}

blue($color)

指定した色のRGB値のB値を返します。

Sass

.sample {
  color: rgba(0, 0, blue(#646464), 0.8);
}

CSS

.sample {
  color: rgba(0, 0, 100, 0.8);
}

hsl($hue, $saturation, $lightness)

HSL値から色を作成します。

Sass

.sample {
  color: hsl(40, 50, 60);
}

CSS

.sample {
  color: #ccaa66;
}

hsla($hue, $saturation, $lightness, $alpha)

HSLA値から色を作成します。

Sass

.sample {
  color: hsla(50, 50, 50, 0.8);
}

CSS

.sample {
  color: rgba(191, 170, 64, 0.8);
}

hue($color)

指定した色のHSL値のH値を返します。

Sass

.sample {
  color: hsl(hue(#ccaa66), 50, 60);
}

CSS

.sample {
  color: #ccaa66;
}

saturation($color)

指定した色のHSL値のS値を返します。

Sass

.sample {
  color: hsl(40, saturation(#ccaa66), 60);
}

CSS

.sample {
  color: #ccaa66;
}

lightness($color)

指定した色のHSL値のL値を返します。

Sass

.sample {
  color: hsl(40, 50, lightness(#ccaa66));
}

CSS

.sample {
  color: #ccaa66;
}

　

文字列関連

unquote($string)

文字列から引用符を削除します。

Sass

.sample {
  content: unquote('string');
}

CSS

.sample {
  content: string;
}

quote($string)

文字列に引用符を追加します。

Sass

.sample {
  content: quote(string);
}

CSS

.sample {
  content: "string";
}

str-length($string)

文字列の文字数を返します。

Sass

.sample {
  content: "#{str-length(string)}";
}

CSS

.sample {
  content: "6";
}

str-insert($string, $insert, $index)

文字列の$index番目に値を挿入します。

Sass

$size: '300px';
.sample {
  content: "#{str-index($size, px)}";
}

CSS

.sample {
  content: "4";
}

str-index($string, $substring)

文字列内で$substringが最初に現れるインデックスを返します。

Sass

.sample {
  content: "#{str-insert(string, ADD, 3)}";
}

CSS

.sample {
  content: "stADDring";
}

str-slice($string, $start-at, [$end-at])

文字列から部分的に切り出す。

Sass

.sample {
  content: "#{str-slice(string, 3)}";
}

CSS

.sample {
  content: "ring";
}

to-upper-case($string)

文字列を大文字に変換します。

Sass

.sample {
  content: "#{to-upper-case(string)}";
}

CSS

.sample {
  content: "STRING";
}

to-lower-case($string)

文字列を小文字に変換します。

Sass

.sample {
  content: "#{to-lower-case(STRING)}";
}

CSS

.sample {
  content: "string";
}

　

数値関連

percentage($number)

指定した数値をパーセントに変換します。

Sass

.sample {
  width: percentage(800 / 1200);
}

CSS

.sample {
  width: 66.66667%;
}

round($number)

指定した数値を四捨五入します。

Sass

.sample {
  width: round(66.66667%);
}

CSS

.sample {
  width: 67%;
}

ceil($number)

指定した数値の小数点以下を切り上げます。

Sass

.sample {
  width: ceil(66.66667%);
}

CSS

.sample {
  width: 67%;
}

floor($number)

指定した数値の小数点以下を切り捨てます。

Sass

.sample {
  width: floor(66.66667%);
}

CSS

.sample {
  width: 66%;
}

abs($number)

指定した数値の絶対値を返します。

Sass

.sample {
  left: abs(-100px);
}

CSS

.sample {
  left: 100px;
}

min($numbers…)

指定した複数の数値のうち最小値を返します。

Sass

.sample {
  width: min(100px, 200px, 300px);
}

CSS

.sample {
  width: 100px;
}

max($numbers…)

指定した複数の数値のうち最大値を返します。

Sass

.sample {
  width: max(100px, 200px, 300px);
}

CSS

.sample {
  width: 300px;
}

random()

0以上1未満の乱数を返します。

Sass

.sample {
    opacity: random();
}

CSS

.sample {
  opacity: 0.91765;
}

　

リスト関連

length($list)

リストの項目数を返します。

Sass

$list: 'A', 'B', 'C';
@for $i from 1 through length($list) {
  .sample#{$i} {
    color: red;
  }
}

CSS

.sample1 {
  color: red;
}
.sample2 {
  color: red;
}
.sample3 {
  color: red;
}

nth($list, $n)

リスト内の$n番目の値を返します。

Sass

$list: 'A', 'B', 'C';
@for $i from 1 through length($list) {
  .sample#{$i} {
    content: nth($list, $i);
  }
}

CSS

.sample1 {
  content: "A";
}
.sample2 {
  content: "B";
}
.sample3 {
  content: "C";
}

set-nth($list, $n, $value)

リスト内の$n番目の値を変更します。

Sass

$list: 'A', 'B', 'C';
$list: set-nth($list, 1, 'D');
@for $i from 1 through length($list) {
  .sample#{$i} {
    content: nth($list, $i);
  }
}

CSS

.sample1 {
  content: "D";
}
.sample2 {
  content: "B";
}
.sample3 {
  content: "C";
}

join($list1, $list2, [$separator, $bracketed])

2つのリストを結合します。

Sass

$list1: 'A', 'B', 'C';
$list2: 'あ', 'い', 'う';
$list: join($list1, $list2);
@for $i from 1 through length($list) {
  .sample#{$i} {
    content: nth($list, $i);
  }
}

CSS

.sample1 {
  content: "A";
}
.sample2 {
  content: "B";
}
.sample3 {
  content: "C";
}
.sample4 {
  content: "あ";
}
.sample5 {
  content: "い";
}
.sample6 {
  content: "う";
}

append($list1, $val, [$separator])

リスト内の最後に値を追加します。

Sass

$list: 'A', 'B', 'C';
$list: append($list, 'D');
@for $i from 1 through length($list) {
  .sample#{$i} {
    content: nth($list, $i);
  }
}

CSS

.sample1 {
  content: "A";
}
.sample2 {
  content: "B";
}
.sample3 {
  content: "C";
}
.sample4 {
  content: "D";
}

zip($lists…)

複数のリストを単一の多次元リストに結合します。

Sass

$list1: 'A', 'B', 'C';
$list2: 'red', 'green', 'blue';
$zip: zip($list1, $list2);
@for $i from 1 through length($zip) {
  .sample#{nth(nth($zip, $i), 1)} {
    color: nth(nth($zip, $i), 2);
  }
}

CSS

.sampleA {
  color: "red";
}
.sampleB {
  color: "green";
}
.sampleC {
  color: "blue";
}

index($list, $value)

リスト内の値の位置を返します。

Sass

$list: 'A', 'B', 'C';
@for $i from 1 through length($list) {
  .sample#{$i} {
    content: nth($list, $i);
  }
}
.sample#{index($list, 'B')} {
  color: red;
}

CSS

.sample1 {
  content: "A";
}
.sample2 {
  content: "B";
}
.sample3 {
  content: "C";
}
.sample2 {
  color: red;
}

　

マップ関連

map-get($map, $key)

マップ内の$keyの値を返します。

Sass

$map:(
  A: red,
  B: blue,
  C: green
);
.sample {
  color: map-get($map, A);
}

CSS

.sample {
  color: red;
}

map-merge($map1, $map2)

2つのマップを結合します。

Sass

$map1:(
  A: red,
  B: blue,
  C: green
);
$map2:(
  D: yellow,
  E: pink
);
$map: map-merge($map1, $map2);
@each $name, $color in $map {
  .sample-#{$name} {
    color: $color;
  }
}

CSS

.sample-A {
  color: red;
}
.sample-B {
  color: blue;
}
.sample-C {
  color: green;
}
.sample-D {
  color: yellow;
}
.sample-E {
  color: pink;
}

map-remove($map, $keys…)

指定したキーが削除された新しいマップを返します。

Sass

$map:(
  A: red,
  B: blue,
  C: green
);
$map: map-remove($map, A, C);
@each $name, $color in $map {
  .sample-#{$name} {
    color: $color;
  }
}

CSS

.sample-B {
  color: blue;
}

map-keys($map)

マップ内の全てのキーのリストを返します。

Sass

$map:(
  A: red,
  B: blue,
  C: green
);
@each $name in map-keys($map) {
  .sample-#{$name} {
    content: "#{$name}";
  }
}

CSS

.sample-A {
  content: "A";
}
.sample-B {
  content: "B";
}
.sample-C {
  content: "C";
}

map-values($map)

マップ内の全ての値のリストを返します。

Sass

$map:(
  A: red,
  B: blue,
  C: green
);
@each $color in map-values($map) {
  .sample-#{$color} {
    color: $color;
  }
}

CSS

.sample-red {
  color: red;
}
.sample-blue {
  color: blue;
}
.sample-green {
  color: green;
}

　

セレクタ関連

selector-nest($selectors…)

指定したセレクタをネストした状態で返します。

Sass

$selector1: '.hoge';
$selector2: '.fuga';
#{selector-nest($selector1, $selector2)} {
  color: red;
}

CSS

.hoge .fuga {
  color: red;
}

selector-append($selectors…)

指定したセレクタを連結した状態で返します。

Sass

$selector1: '.hoge';
$selector2: '.fuga';
#{selector-append($selector1, $selector2)} {
  color: red;
}

CSS

.hoge.fuga {
  color: red;
}

　

チェック関連

variable-exists($name)

指定した変数が現在のスコープ内に存在するかどうかを返します。

Sass

$width: 500px;
.sample {
  $color: red;
  @if variable-exists(color) {
    color: $color;
  }
  @if variable-exists(width) {
    width: $width;
  }
  @if variable-exists(height) {
    height: $height;
  }
}

CSS

.sample {
  color: red;
  width: 500px;
}

global-variable-exists($name)

指定した変数がグローバルスコープに存在するかどうかを返します。

Sass

$width: 500px;
.sample {
  $color: red;
  @if global-variable-exists(color) {
    color: $color;
  }
  @if global-variable-exists(width) {
    width: $width;
  }
  @if global-variable-exists(height) {
    height: $height;
  }
}

CSS

.sample {
  width: 500px;
}

function-exists($name)

指定した関数が存在するかどうかを返します。

Sass

@function hoge() {
  @return "hoge";
}
.sample {
  @if function-exists(hoge) {
    content: hoge();
  }
  @if function-exists(fuga) {
    content: fuga();
  }
}

CSS

.sample {
  content: "hoge";
}

mixin-exists($name)

指定したミックスインが存在するかどうかを返します。

Sass

@mixin hoge {
  content: "hoge";
}
.sample {
  @if mixin-exists(hoge) {
    @include hoge;
  }
  @if mixin-exists(fuga) {
    @include fuga;
  }
}

CSS

.sample {
  content: "hoge";
}

type-of($value)

指定した値の型を返します。

Sass

$data:(
  string: string,
  number: 10%,
  color: #ff0000,
  boolean: true,
  list: ('A', 'B', 'C'),
  map: (
    A: red,
    B: blue,
    C: green
  ),
  'null': null
);
@each $key, $val in $data {
  .sample-#{$key} {
    content: "#{type-of($val)}";
  }
}
.sample {
  @if type-of(map-get($data, color)) == color {
    color: map-get($data, color);
  }
}

CSS

.sample-string {
  content: "string";
}
.sample-number {
  content: "number";
}
.sample-color {
  content: "color";
}
.sample-boolean {
  content: "bool";
}
.sample-list {
  content: "list";
}
.sample-map {
  content: "map";
}
.sample-null {
  content: "null";
}
.sample {
  color: #ff0000;
}

unit($number)

指定した数値の単位を返します。

Sass

$width: 100px;
.sample {
  @if unit($width) == px {
    width: $width;
  }
}

CSS

.sample {
  width: 100px;
}

unitless($number)

指定した数値に単位が付いていないかどうかを返します。

Sass

$width: 100;
.sample {
  @if unitless($width) {
    width: #{$width}px;
  }
}

CSS

.sample {
  width: 100px;
}

comparable($number1, $number2)

指定した2つの数値で加算、減算、比較できるかどうかを返します。

Sass

$number1: 100px;
$number2: 10%;
$number3: 20%;
.sample {
  @if comparable($number1, $number2) {
    width: $number1+$number2;
  }
  @if comparable($number2, $number3) {
    width: $number2+$number3;
  }
}

CSS

.sample {
  width: 30%;
}

　

その他

if($condition, $if-true, $if-false)

$conditionの条件に一致する場合は$if-true、一致しない場合は$if-falseを返します。

Sass

$color: red;
.sample {
  color: if(global-variable-exists(color), $color, blue);
}

CSS

.sample {
  color: red;
}

unique-id()

ユニークIDを返します。

Sass

.sample {
  background-image: url("/img/hoge.png?#{unique-id()}");
}

CSS

.sample {
  background-image: url("/img/hoge.png?u8ad4b9b8");
}

　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930