【Sass(SCSS)】$hoge(変数)の使い方
Index
変数とは？
任意の名前(変数名)をつけて、値を割り打てるもの。うーん、わかりにくい。。変数の説明って意外と難しい。
Sassに関してはcssのプロパティの値(14pxとか、boldとか、#000とか)を好きな名前で置き換えたもの(変数)をつかって、いろんな箇所で使い回せるもの。くらいで考えた方がわかりやすいかも。
変数について詳しく知りたい人はこちら
変数の書き方
基本は「$」+「変数名(好きなの)」: 「値」の順で書く。
値には数値、文字列、色、リスト、真偽値(true, false)、Nullが使える。
Sass(SCSS)
//変数
$color : #000;
$font : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
.hoge {
color : $color;
font-family : $font;
}CSS
.hoge {
color : #000;
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
}変数を使う時に気をつけること
サイト全体の統一性に関わるものだけを変数にする
変数を参照するとコーディングが楽になるからと言って、なんでも変数にしたり、同じ数値だからといっていろんな箇所で使うと、変数の値を変更したり修正したときにすごく大変になる。サイト全体のキーカラーや基本のフォントサイズ、フォントなど統一性を出すものだけを変数にする。
悪い例(極端な例)
_hoge.scss
//変数
$gap : 20px;
.hoge {
margin-bottom : $gap;
padding-right : $gap;
}
h1{
position : abosolute;
bottom : $gap;
}これだと、$gapの値の20pxを40pxに変えた時に、本当は.hogeのmargin-bottomだけを変えたかったのに、他の箇所にも適用されて、レイアウトが崩れる恐れもある。
良い例
hoge.scss
$font-brand: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif';
$font-helvetica: Helvetica, Arial,Montserrat,verdana, sans-serif;
$color-brand:
$color-primary:
$color-secondary:
$bg-brand:
$bg-primary:
$bg-secondary:
$img-path: 'images/' ; //パスも変数にできる
body{
background-color: $bg-brand;
font-family :$font-brand;
color :$color-brand: ;
}変数は別ファイル(_variable.scss)にまとめる
サイト全体に関わる設定なので、あっちこっちのファイルに散りばめられていると見失うので、一つのファイルにまとめる。_variable.scssというファイルにすればSassを使う人はみんな変数が入っているファイルなのね。ってわかる。(variableの日本語訳が変数だしね)
発展 : mapを使って連想配列を作る。
Sass 3.3から使えるようになったmapを使うと、こういうことも出来る。
_function.scss
@function color($key: default) {
@return map-get($color, $key);
}
@function font-family($key: default) {
@return map-get($font-family, $key);
}_variables.scss
$color: (
default: #333,
brand: #990000,
primary: #d60a29,
secondary:#a30019
) !default;
$bg: (
default: #333,
brand: #990000,
primary: #d60a29,
secondary:#a30019
) !default;
$font-family: (
default: ('sans-serif),
brand: ('ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif'),
helvetica: (Helvetica, Arial,Montserrat,verdana, sans-serif)
) !default;
body{
background-color: $bg(brand);
font-family :$font-family: (brand);
color :$color(brand);
}hoge.scss
body{
background-color: $bg(brand);
font-family :$font-family: (brand);
color :$color(brand);
}変数を使うときのルールを決めよう。
- サイト全体の統一性に関わるものだけを変数にする。
- _variable.scss(1つのファイル)に定義する。
- 他のプロジェクトでも変数の値を変えるだけで使えるような基本設定の役割のファイルになるようにする。
