Sassを使い始めてしばらく経ちました。とは言ってもCompassはまだ使っておらず、ごくごく基本的な範囲でSassを使っていて思ったことを書いてみます。
セレクタのネストし過ぎは禁物
便利だな~と思ってネストしまくると、うん、とても見づらいです(苦笑)。例えば#mainなどIDセレクタを使ってスタイルを区切っていくと、そのID内のスタイルを書くときはずっとインデントしているわけで、それはちょっとう～んな感じ。
Media Queriesを使うとさらにネストが深くなりますし。
ただ、それはIDセレクタに依存しているコーディングルールの方に問題があるのかも。最初から階層があまり深くないようにhtmlの構造を設計し、OOCSSなどをうまく取り入れてバランスを取るのが良いのかもしれません。
ただ、ある程度慣れてルールが決まってくると、きれいなコードが書けるようになるのは間違いないと思います。これからもガシガシ使っていこうと思います。
Media Queriesと@mixin
Sassでショックだったのが、Media Queriesを使うと@extendが使えないということ。セレクタをグループ化する機能なのでそれもしかたないのですが、けっこうがっかり。@mixinで対応するしかありません。
しかし、@mixinを使う場面とそうでない場面を考え直す必要もあるとひらめきました。それらの機能を使いすぎるとcssが荒れます。それよりも、明示的にclassをhtmlに与える方がきれいなコードになる場合も多いというのが実感です。
変数と@inmport
Sassの醍醐味はコードの「再利用」だと思うのですが、再利用するということはスタイルをコンポーネント化する、ということに繋がると思います。
サイト全体のレイアウトや、リンクカラー、フォントファミリなどの基本的なスタイルに対応する値を変数として入力するSassファイルと、その受け手となるコンポーネントSassファイルを用意し、組み合せて使っています。
この2つを@inmportとすると、コンパイル後のCSSとしてひとつに合体できるので、Sassファイルを汚染すること無く使いまわせるようになり、とっても楽になりました。
これが極まった先に見えるのはCSSフレームワーク。Sass版のTwitterBootstrapなんかもあるようですし、あぁ、Compassもフレームワークですね。使ってみたいです。
制御構造は案件とスキル次第で可能性を感じる。が…
ループ処理などプログラミング言語っぽい機能も提供しているSassですが、このあたりはまだスキルが追いついていません。もう少し勉強が必要そうです(^^;)
もうSassなしでコーディイングはしたくない。しかし、真の力を引き出すにはまだまだ勉強が必要
見出しが全てを述べている感じですが、まだまだ使いこなせている感じはしないです。根本的なCSS、その他コーディング全般の底上げをして、はじめてSassの力を引き出せそう。精進あるのみです！