SCSSまとめ集
目次
1. 関数とは?
- 他言語同様、処理を行って戻り値を取得することができる。
- あらかじめ用意されてある関数も存在する。
2. 自作関数
- @functionで関数を定義できる。
scss
@functionmyFunction($val){@return$val*100px;}.box{width:myFunction(2);}//トランスパイル後.box{width:200px;}- デフォルト値、引数を複数設定する場合
scss
@functionmyFunction($val1:100px,$val2:200px){@return$val1+$val2;}.box{width:myFunction();}//トランスパイル後.box{width:300px;}- 可変長引数の場合
scss
@functionmyFunction($vals...){$width:0px;@each$valin$vals{$width:$width+$val;}@return$width;}.box{width:myFunction(50px,100px,150px);}//トランスパイル後.box{width:300px;}3. Mixinについて
scss
@mixinbox($width:100px,$bgcolor:#000){width:$width;background:$bgcolor;}.hoge{@includebox;}//トランスパイル後.hoge{width:100px;background:#000;}@contentを使う場合
scss(content使用例)
@mixinbox($width:100px,$bgcolor:#000){width:$width;background:$bgcolor;@content;}.color1{@includebox{color:red;}}.color2{@includebox{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");//3prop:str-index("あいうえお","い");//2prop:str-index("あいうえお","か");//nullprop: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");//8prop: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");//hogehogeprop: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);//numberprop:typeof("hoge");//stringprop:typeof(true);//boolprop:typeof(null);//null}//untitless($number).hoge{prop:unitless(100);//trueprop:unitless(100px);//falseprop:unitless(100%);//false}//length($list).hoge{prop:length(12);//2prop:length("hoge"1true);//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/'