[Sass]Sass初めて2週間のおじさんが基本をまとめてみる

Sass
Sass面白いよー。
だからまとめてみるよー。
SCSSで書いてくよー。

まずは

セレクタの入れ子

↓↓↓ コンパイル後 ↓↓↓

こんな感じで親セレクタを省略できるメリットがある。
そしてコレが便利だと思ったものがプロパティまで入れ子にできちゃうんです!

↓↓↓ コンパイル後 ↓↓↓

&セレクタ

「&」を使うと親セレクタを参照することができちゃう!

↓↓↓ コンパイル後 ↓↓↓

これだけ覚えてくだけでも親セレクタを何度も書かずにすむので便利ですね!

セレクタの継承

あるセレクタの「プロパティ:値」を流用することができるんです!

↓↓↓ コンパイル後 ↓↓↓

変数が!

Sassでは変数が使えるんです!
変数の書き方は

と書きます。

↓↓↓ コンパイル後 ↓↓↓

使いまわすような値がある場合は便利!
修正も変数の値を変えるだけでできてしまうんです!

まとめ

まだ他にも@includeや@importなどありますが小分けにして書いて行こうと思います。(ネタがないから・・・)

しかしこれだけでもかなり作業効率はあがります。
ただ入れ子はあまりやり過ぎると訳が分からなくなりますから気をつけたほうがいいですねw

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク