1.関数を使って記述する
関数とは、プログラミング言語の用語で、いくつかの命令・処理内容がまとめられたものです。関数に対して何か値を与えると、値が処理されて、結果が返ってきます。
Sassにはあらかじめ用意されている関数「ネイティブ関数」と、自作の関数「カスタム関数」があります。このレッスンでは代表的なネイティブ関数の紹介と、カスタム関数の作り方を解説します。
関数の基本的な使い方
まずはあらかじめ用意されている`lighten()`というネイティブ関数を使って、関数の使い方を解説します。
`lighten()`は指定した色の輝度を明るくする関数です。`()`の中には色と何%明るくするか値を入れます。
.lighten {
color: lighten(#ff0000, 30%);
}
コンパイル後の結果です。
.lighten {
color: #ff9999;
}
ff0000がff9999になって出力されました。
このような形で、`関数名`のあとの`()`の中に値を入れると、関数の内容に従って処理が行われ、結果が出力されます。
2.代表的なネイティブ関数
四捨五入、切り上げ、切り捨て
- round()：四捨五入
- ceil：切り上げ
- floor：切り捨て
これらの関数を使うと、数値を操作することができます。
.round {
content: round(1.5);
}
コンパイル結果
.round {
content: 2;
}
ランダム
- random()：0〜1までのランダムな数値を返す
値に例えば100を入れると、1〜100の間でランダムな数値を返します。
.random {
content: random(100);
}
コンパイル結果
.random {
content: 20;
}
色の指定と透過度を16進数からRGBaに変換する
- rgba()：色と透過度を入れると、RGBa形式に変換する
.color {
color: rgba(#f00, 0.5);
}
コンパイル結果
.color {
color: rgba(255, 0, 0, 0.5);
}
2つの色の間を出力する
mix：2つの色と割合を指定し、色を返す
.color {
color: mix(#f00, #00f, 0.5);
}
コンパイル結果
.color {
color: #0100fe;
}
ダブルクオーテーションで文字を囲う
quote：入れた値をダブルクオーテーションで囲って出力する
.quote::after {
content: quote(Hello);
}
コンパイル結果
.quote::after {
content: "Hello";
}
配列からn番目を取り出す
Sassは配列が使えます。変数の中にカンマで区切ると、配列になります。配列から1つ取り出したいときの関数です。
- nth()：配列からn番目の値を返す
$items: "apple","banana","orange";
.item::after {
content: nth($items, 2);
}
コンパイル結果
.item::after {
content: "banana";
}
3.カスタム関数の作り方
Sassの関数は自作することもできます。以下のように記述します。
@function カスタム関数名($引数){
@return 返り値;
}
引数に入れた値を連結する関数を作ってみました。
@function hello($key){
@return $key + ",world";
}
.sample{
content: hello("hello");
}
コンパイル結果
.sample {
content: "hello,world";
}
プログラミングについて経験がないとちょっと難しい内容になってきました。特にカスタム関数についてはあまりデザイナーの方がオリジナルで作るという機会は少ないかもしれません。「こういうものがあるんだ」ぐらいに知っておくと、どこかで役に立つかもしれません。
