SCSS まとめ２（関数）

SCSSまとめ集

1. 基本文法
2. 関数
3. コンパイル方法

目次

1. 関数とは?
2. 自作関数
3. Mixinについて
4. 組込関数

1. 関数とは?

• 他言語同様、処理を行って戻り値を取得することができる。
• あらかじめ用意されてある関数も存在する。

2. 自作関数

• @functionで関数を定義できる。

scss

@function myFunction($val){
  @return $val * 100px;
}
.box{
  width: myFunction(2);
}

//トランスパイル後
.box{
  width: 200px;
}

• デフォルト値、引数を複数設定する場合

scss

@function myFunction($val1:100px, $val2:200px){
  @return $val1 + $val2;
}
.box{
  width: myFunction();
}

//トランスパイル後
.box{
  width: 300px;
}

• 可変長引数の場合

scss

@function myFunction($vals...){
  $width: 0px;
  @each $val in $vals {
    $width: $width + $val;
  }
  @return $width;
}
.box{
  width: myFunction(50px, 100px, 150px);
}

//トランスパイル後
.box{
  width: 300px;
}

3. Mixinについて

• 引数を指定したスタイルの継承を行う。
• @mixinで関数を定義、@includeで呼び出す。
• @contentで、コンテントブロックを渡すことができる。

scss

@mixin box($width:100px, $bgcolor:#000){
  width: $width;
  background: $bgcolor;
}
.hoge {
  @include box;
}

//トランスパイル後
.hoge {
  width: 100px;
  background: #000;
}

@contentを使う場合

scss(content使用例)

@mixin box($width:100px, $bgcolor:#000){
  width: $width;
  background: $bgcolor;
  @content;
}
.color1 {
  @include box {
    color: red;
  }
}
.color2 {
  @include box {
    color: blue;
  }
}

//トランスパイル後
.color1 {
  width: 100px;
  background: #000;
  color: red;
}
.color2 {
  width: 100px;
  background: #000;
  color: blue;
}

4. 組込関数

あらかじめ用意されてある関数。以下に記載。

• 文字列
• 数値
• 色
• セレクタ
• その他

---

文字列

関数	意味
str-index	文字の検索（何文字目かを返す）
str-slice	文字の切り出し
str-length	文字の長さ
str-insert	文字を挿入
to-lower-case	小文字に変換
to-upper-case	大文字に変換
unquote	クォーテーションを取り除く
quote	ダブルクォートを付与する

scss(文字列の関数)

//str-index($string, $substring)
.hoge{
  prop: str-index("abcdefg", "c");   //3
  prop: str-index("あいうえお", "い");  //2
  prop: str-index("あいうえお", "か");  //null
  prop: str-index("abcdefg", "ef");  //5
}

//str-slice($string, $start-at, $end-at)
.hoge{
  prop: str-slice("abcdefg", 2, 4);  //"bcd"
  prop: str-slice("あいうえお", 3);     //"うえお"
  prop: str-slice("zyxcba", -2);     //"ba"
}

//str-length($string)
.hoge{
  prop: str-length("hogehoge");  //8
  prop: str-length("ふがfuga");   //6
}

//str-insert($string, $insert, $index)
.hoge {
  prop: str-insert("abcde", "z", 1);     //"zabcde"
  prop: str-insert("abcde", "zzz", 3);   //"abzzzcde"
}

//to-lower-case($string)
.hoge{
  prop: to-lower-case("ABCDEF");   //"abcdef"
  prop: to-lower-case("あいうEお");  //"あいうeお"
}

//to-upper-case($string)
.hoge{
  prop: to-upper-case("abcdef");   //"ABCDEF"
  prop: to-upper-case("あいうeお");  //"あいうEお"
}

//unquote($string)
.hoge{
  prop: unquote("hogehoge");  //hogehoge
  prop: unquote('あいうえお');   //あいうえお
}

//quote($string)
.hoge{
  prop: quote(hogehoge);  //"hogehoge"
}

---

数値

関数	意味
ceil	小数点を切り上げた値を返す
floor	小数点を切り捨てた値を返す
round	小数点を四捨五入した値を返す
min	最小値を返す
max	最大値を返す
random	1~指定した数値の範囲内の数値を返す(引数省略時は0以上1未満)
abs	絶対値を返す

scss(数値の関数)

//ceil($number)
$number1: ceil(10.1);   //11

//floor($number)
$number2: floor(10.1);  //10

//round($number)
$number3: round(10.4);  //10

//min($number...)
$number4: min(1,5,10);  //1

//max($number...)
$number5: max(1,5,10);  //10

//random($limit)
$number6: random(100);  //56

//abs($number)
$number7: abs(-100);    //100

---

色

関数	意味
rgb	RGB値を計算して返す
rgba	RGBA値を計算して返す
red	RGB値のR値を返す
green	RGB値のG値を返す
blue	RGB値のB値を返す
mix	中間色を返す
hsl	HSL値(色相、彩度、輝度)を計算して返す
hsla	HSLA値を計算して返す
hue	HSL値の色相を返す
saturation	HSL値の彩度を返す
lightness	HSL値の輝度を返す

scss(色の関数)

//rgb($red, $green, $blue)
$color1: rgb(111, 123, 254);  //#6f7bfe

//rgba($red, $green, $blue, $alpha)
$color2: rgba(111, 123, 254, 0.4);  //rgba(111, 123, 254, 0.4)

//mix($color1, $color2, $weight)
$color3: mix(red, green, 50%);   //#804000

//hsl($hue, $saturation, $lightness)
$color4: hsl(122, 10%, 55%); //#819882

//hsla($hue, $saturation, $lightness, $alpha)
$color5: hsla(122,10%,55%,0.5);  //rgba(129,152,130,0.5)

//hue($color)
$color6: hue(#123456); //210deg

//saturation($color)
$color7: saturation(#123456); //65.3846153846%

//lightness($color)
$color8: lightness(#123456); //20.3921568627%

---

セレクタ

関数	意味
selector-append	セレクタ名を連結して返す
selector-nest	セレクタ名を子孫セレクタとして連結して返す
selector-extend	セレクタ名をカンマ区切りで返す
selector-replace	セレクタ名を置換して返す

scss(セレクタの関数)

//selector-append($selectors...)
$selectors: selector-append("#box", ".content", ".new"); //#box.content.new

//selector-nest($selectors...)
$selectors: selector-nest("#box", ".content", ".new");   //#box .content .new

//selector-extend($selector, $extendee, $extender)
$selectors: selector-extend(".box .text", ".text", ".item");  //.box .text, .box .item

//selector-replace($selector, $original, $replacement)
$selectors: selector-replace(".box .text", ".text", ".item");  //.box ,item

---

その他

関数	意味
selector-append
type-of	データ型を返す
untitless	単位が含まれているかどうかを返す
length	配列の要素数を返す
append	配列の末尾に追加して返す
nth	配列の値を返す
map-get	連想配列の値を返す

scss(その他の関数)

//type-of($value)
.hoge {
  prop: typeof(123);     //number
  prop: typeof("hoge");  //string
  prop: typeof(true);    //bool
  prop: typeof(null);    //null
}

//untitless($number)
.hoge {
  prop: unitless(100);    //true
  prop: unitless(100px);  //false
  prop: unitless(100%);   //false
}

//length($list)
.hoge {
  prop: length(1 2);            //2
  prop: length("hoge" 1 true);  //3
}

//append($list, $val, [$separator])
//$separatorには"space", "comma", "auto"のいずれかが指定可能
.hoge {
  prop: append("hoge" "fuga" "piyo");  //"hoge" "fuga" "piyo"
  prop: append(1, 2, 3, comma);        //1, 2, 3
}

//nth($array, $index)
$games: ['switch', 'ps', 'xbox'];
$str: nth($games, 1);  //'switch'

//map-get($map, $key)
$urls:(
  google: 'https://www.google.com/',
  yahoo: 'https://www.yahoo.co.jp/',
  amazon: 'https://www.amazon.co.jp/'
);
$url: map-get($urls, google);  //'https://www.google.com/'