はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。
・ Sassのfunction(自作関数)と使い方について
mixinと比べ、使用頻度は減るかと思いますが、コーディングの幅が広がると思いますので
使い方について簡単ではありますが記事にしました。
例
関数の定義
Sassで自作関数を定義する方法は、以下のように記述します。
引数を囲む( )は、引数があってもなくても必要です。
@function 関数名(引数) {
@return
}
関数colorRed
を定義し、それを.testのcolor
プロパティに呼び出してみます。
@function colorRed() {
@return #00f
}
.test {
color: colorRed();
}
CSSにコンパイルすると以下のようになります。
@return
されると、00f
がcolor
プロパティの値としてそのまま代入します。
.test {
color: #00f;
}
引数
( )に$引数名
を定義すると、関数の中で使える変数として扱うことができます。
.testのcolor
プロパティに関数colorCode
の引数をgreen
と記述してみます。
@function colorCode($value) {
@return $value
}
.test {
color: colorCode(green);
}
CSSにコンパイルすると以下のようになります。
引数に指定したプロパティがそのまま反映されます。
.test {
color: green;
}
小数を変換する
次に、小数を%に変換する関数を作成してみます。
width
プロパティへの引数に.5=50%を指定して、@return
に返す引数の結果に100%を掛けます。
@function widthSpace($value) {
@return $value * 100%
}
.test {
width: marginSpace(.5);
}
そうすると、width
プロパティの値は50%となります。
.test {
width: 50%;
}
引数を関数内で計算する
$value
の値を関数の中で計算してから使うこともできます。
@function marginSpace($value) {
$value: $value * 3;
@return $value * 100%
}
.test {
margin: marginSpace(.12);
}
.test {
margin: 36%;
}
四捨五入する
引数に0.255のような値を指定して、実行結果に小数点以下を切り捨てる場合はSassの組み込み関数を使います。
round
Sassの組み込み関数で、round()
と記述し、( )に処理したい値を渡すと、四捨五入した値を返します。
@function marginSpace($value) {
$value: $value * 3;
@return round($value * 100%)
}
.test {
margin: marginSpace(.125);
}
.test {
margin: 38%;
}