2014年の勉強目標だった、Sassを勉強中です。なんとなく使い方が分かってきたところで、
基礎知識を脳外に放出する悪い癖が出てきそうだったので、忘れないように図にして頭に叩き込もうと思います。
皆さんお察しの通り、絵とか図とか書かないと脳内に入らない、そういうお年なんですyo…(´・ω・｀)
Sassとは、CSSをもっと簡単に効率よく書けるようにした言語
難しく言うと、CSSに対して機能を拡張した言語（メタ言語）です。
Sassには2種類あるけど、私はSCSS記法を勉強中
Sassには、SASS記法・SCSS記法の2種類あります。ややこしや。
SASS記法
- 拡張子｜.sass
- 記述ルール｜インデントのみ
- CSS互換性｜なし
SCSS記法
- 拡張子｜.scss
- 記述ルール｜{} , ;
- CSS互換性｜あり
SassをコンパイルしてCSSにする。
Sassファイルは、そのままではブラウザが認識してくれません。cssファイルにする必要があります。それがコンパイルです。
コンパイルするためには、RubyとSassをインストール！
コンパイルするためには、RubyとSassがインストールされている必要があります。
MacにはデフォルトでRubyが入っていますので、SassをインストールするだけでOK。
Winは、RubyもSassもインストールする必要があります。
黒い画面を使うってどこにでも書いてあるから身構えてたけど、そんなに使わなくて逆にがっかり（苦笑）。
インストール方法はこちらのサイトを参照になさってくださいませ。
scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。
[browser-shot url="http://hayashikejinan.com/webwork/239/" width="600"]
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)
[browser-shot url="http://liginc.co.jp/web/html-css/css/56599" width="600"]
ちなみに、RubyやSassをまとめてインストールしてくれるGUI（Graphical User Interface/アプリケーションみたいなものです）もある（Scoutとか）ようです。やりやすい方法でどうぞー。
Sassのどこが良いのか？
Sassでコーディングするとどんな良いことがあるのか？というと、
- コードの管理・メンテナンス・修正が楽チン
- 記述量が減る
- 可読性がアップ
こんな点かと思います。コードの管理・メンテ・修正が楽ちんってところが最大の導入メリットだと思いますけどね！
Sassの書き方
テキストエディタでCSSのように記述するだけ。ファイルの拡張子は『〇〇.scss』にすればOK。ブラウザは.scssファイルを認識しないのでコンパイルが必要ですが、GUIを使っていれば、保存するたびに自動でcssファイルにコンパイルしてくれます。
これだけ使えるだけでもSassの便利さが分かる！
で、機能的に色々できるSassなんですけど、最低限これだけ使えるだけで便利さの恩恵を受けられるっていう機能だけピックアップしてみます。私もこれだけ抑えてさっさと使い始めてます。細かいこたぁ後からでいいんだよw
入れ子（ネスト）に出来る
入れ子で記述できることによって、記述量がかなり減りますが、それ以上に修正の簡単さ！例えば、id名のmainが変更になった場合、Sassで入れ子にしていれば、最上位の#mainを修正すれば良いだけ！なんて楽チンなんだ！！
[css]
#main {
margin:1em;
h2 {
color:#666;
}
p {
color:#000;
}
}
[/css]
変数が使える
サイトをデザインするときに、使う色をあらかじめ決めておくのですが、これらを最初に変数で指定しておけば、変数名で呼び出せるようになります。これまた修正の時に作業が簡単になりますよね。
[css]
$blue:#008BBB;
#main div{
color:$blue;
}
[/css]
基本編のまとめ
とりあえず私はネストだけ、使ってみてます。
変数便利！って思っていたんだけど、これまでのCSSの記述の癖がまだ抜けないせいなのか、私の何かが面倒くさがっているのか、変数のスコープで上手く使い回せない…。多分、他にもある@mixinとか@extend使えば簡単に便利に使えるようになるんだと思います。まだ勉強中…。
でもネストだけでも、十分SASS使いやすい！って実感中。皆が言う『一度使ったら離れられない』、その通りですよ。これは、CSSが書きやすい。
早く高度な技も習得せなー！！
今回勉強で使った本はコレ
画像もいっぱいで、分かりやすく、見やすく、良い本でしたー★
やっぱフルカラーの本は可読性が良いからいいですね(ﾟ∀ﾟ)！難しそうな印象も和らぐし！
[amazonjs asin="4844334662" locale="JP" title="Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語"]
