トップへ戻る
BLOGS

SCSS で関数使用するまたは関数をを自作する方法

SCSS で関数使用するまたは関数をを自作する方法

今回はSCSSでの関数を自作する基礎を

まとめておこうと思います。

z-indexを見やすく管理する方法

まずは自作の配列を用意します。

$z-map: header,mask,modal,alert;

これは配列なので自作関数を作って

この配列の順番でz-indexの管理を行えばひと目でどう重なっているか分かるようにしていきたいと思います

z-index: index($z-map,header);

まずはSCSSに最初から入っている関数です

index()は配列、キーの順で引数をとり

そのデータの順番を返します

そしてSCSSでは配列の自動で振られる連番は他のプログラミング言語と異なり、

1、2,3,から始まります。

上記の例だと1が返るわけですね、

では自作関数を、

@function getZindex($name) {
  @return index($z-map,$name) + 100
}
・・・・
・・
 z-index: getZindex(mask);

getZindex($name)は関数名です()は引数がなくても必須です

また@functionでの定義も必須で

@returnで値を返すことも必須です。

こうして関数を自作することも可能ですがSCSSには便利な関数が最初から入っているためそちらも簡単に見ていきましょう

色を明るくするlighten()

color : lighten(色の指定 , 20%)のように割合を指定することで色を〜%明るくします

色を暗くするdarken()

lighten()の反対ですね同じ様に指定して暗くします

色を透明にするtransparentize()

transparentize(色の指定 , 0~1までの数値)とすることでrgbaを指定できます。

色相を回転させるadjust-hue()

adjust-hue(色の指定 , 色相の角度を数値で指定)こちらの第二引数は角度なのでdegで指定します。これは背景色などグラデーションを作る時に便利です例えば、

background-image: linear-gradient(red, adjust-hue(red, 50deg));

のようにすると段々と赤からオレンジに変わる様に出来ます。

彩度を上げるsaturate($color, $amount)

$amountを%で指定。

彩度を下げるdesaturate($color, $amount)

上と同じ仕様法、100%にするとグレースケールになる

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA