SCSSまとめ集
目次
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について
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/'