SCSS　まとめ２（関数）

## SCSSまとめ集
1. [基本文法](https://qiita.com/hiro-hiro/items/c981a6a11ee69fabcb74)
1. [関数](https://qiita.com/hiro-hiro/items/b8bb3f3ee99cbac5c828)
1. [コンパイル方法](https://qiita.com/hiro-hiro/items/eaaad48372d2dfb32066)

## 目次
1. [関数とは?](#1-関数とは)
1. [自作関数](#2-自作関数)
1. [Mixinについて](#3-mixinについて)
1. [組込関数](#4-組込関数)

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

## 2. 自作関数
* @functionで関数を定義できる。

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

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

* <strong>デフォルト値、引数を複数設定する場合</strong>

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

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

* <strong>可変長引数の場合</strong>

```scss: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:scss
@mixin box($width:100px, $bgcolor:#000){
  width: $width;
  background: $bgcolor;
}
.hoge {
  @include box;
}

//トランスパイル後
.hoge {
  width: 100px;
  background: #000;
}
```
**@contentを使う場合**

```scss: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: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: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: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: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: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/'
```