31.Sassの便利な書き方を知る ～変数、関数～
昨日は
を学びました。
本日は変数、関数について学習していきます。
CSSなのに変数？
Sassでは変数が使えます。
先に具体例を書くと
$font-bigger : 32px;
.test{
font-size : $font-bigger;
}
では１つずつ見ていきます。
まず変数について
変数は$マークを付けて宣言します。
「なぜ$マークを付けるか」を噛み砕いて言うなら、
$がついていたら、この後の文字列は変数名ですよとお知らせするということです。
この例での変数の宣言は下記のとおりです。
$font-bigger
これは、「font-bigger」という名前の変数を使いますよ。という意味です。
そして変数名の後にコロンで区切り、変数に代入する値を記述します。
先程の例では下記の部分です。
: 32px;
$font-bigger : 32px;
まとめ確認すると、
「font-bigger」という名前の変数に「32px」という値を代入して、これから使いますよ。
という意味ですね。
そして変数の値を使用するには、
CSSでいう「バリュー」の部分に変数名をそのまま記載します。
font-size : $font-bigger;
上記はfont-sizeプロパティのバリューとして、変数font-biggerを使用しています。
$font-biggerには32pxが代入されているので、
SassからCSSを書き出すと
font-size : 32px;
になります。
ここまでをまとめると、
- 変数は$マークをつけて宣言する
- 変数に値を代入する時は＝ではなく：コロンで区切る
- 変数の値を使用するには、バリューの部分に$を付けて変数名をかく。
変数は特に難しいことはなさそうですね。
関数を使うには？
変数が使えるのはわかった。関数はどうやって使うの？
関数を使うには関数名と処理を先に記述します。
まずは関数の書き方を確認します。
@function メソッド名($引数名)
{
処理内容
@return 返り値
}
こんな形で書かれます。
関数を書く場合の注意点は
- 頭に@functionをつけること
- 引数名の頭にも変数と同様に＄マークをつけること
- 返り値の頭に@returnをつけること
ですね。
では具体例で定義方法と使用の仕方を見ていきましょう
@function halfSize($value){
@return $value / 2;
};
.test{
font-size : halfSize(32px);
}
では１つずつ見ていきましょう
@function halfSize($value){ }
この部分は、
関数名がhalfSizeで、引数の変数名が$valueの関数を使うよという意味ですね。
そして{ }この間に書かれた
@return $value / 2;
これは $value変数 の値を 2で割った値 を返り値とするよ
という意味です。
因みに、変数に対して四則演算ができるので、軽く紹介しておきます。
足し算は「+」、引き算は「-」、掛け算は「*」、割り算は「/」の記号を使います。
まとめると、
halfSizeという名前で、引数$valueに代入された値を、2で割って返すという処理をもつ関数が定義された。
ということですね。
では使い方を見ていきましょう。
font-size : halfSize(32px);
ここで、引数が32px？それって計算できるの？と思ったそこのあなた。
私も同じでした。
そう、pxという単位が付属しているのに、
引数に代入して計算できるのか？
それが・・・できるのです。
それは「単位付きの数値も数値(number型)として扱う」というSassのデータ型のおかげです。
ただし、異なる単位での計算はできないので注意です。
色々テストした結果、下記の組み合わせは可能なようです。
同一単位の計算
例: 10px +2px、30px / 2px
片方に単位の記載が無い計算
例: 15px + 12、45px *3
などです。
15px * 2%は計算不可です。
また、単位なし同士の計算は可能ですが、
返り値の使用先で単位指定が必要な場合には
エラーになるのでどちらかに単位を指定する必要があります。
これらを踏まえて関数を作る時には、
関数内部は単位なしの数値を使って処理を記述し、
引数には単位ありの数値を代入して使用する
こういうやり方が汎用性が高そうですね。
今日のまとめ
- 変数は$変数名で宣言、：と値を書いて代入。使う時は$変数名
- 関数は@functionと@return、引数に$変数名を使って記述
- 関数内部の処理の数値には単位を付けない方が汎用性が高そう
今日はSassの変数と関数について学習しました。
明日も楽しみです。
では、また。
