前回のエントリーで、無事にSassが動作する環境が整ったかと思います。
今回は、いよいよ通常のCSSでは出来なかったSassの記述(Sass記法)に関してです!
まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる!って思ってもらえれば幸いです><
記法の前に
Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。
その為、cssファイルをそのまま拡張子だけ .scssに変更して変換(コンパイル)し直すみたいな事も可能です。(圧縮できる程度のメリットしか有りませんが)
軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです。
これに寄ってハードルが下がり、学習コストも最低限で済むので非常に意味の有る事かなーと。
ただ、一部のCSSハックに関しては変換した際にエラーになってしまうので、その場合は別の方法で書く必要があります。
細かい部分まで把握できていませんが、引っかかる可能性が高いハックとしては次のような「/」を使ったIE6/7用のハックを使うとエラーになります。
.item {
/zoom: 1;
}
「/」が使えないので、この場合は「*」にすれば問題有りません。
.item {
*zoom: 1;
}
いきなりちょっと不便っぽい部分が出てきましたが、Sassの素敵なトコの1つとしてエラーがちゃんと表示されることです。
その為、ScoutのLogを見ると下記のように表示されます。
>>> Change detected to: style.scss
error style.scss (Line 12: Invalid CSS after ".item {": expected "}", was "/zoom: 1;")
overwrite style.css
英語が出来なくても『style.scss の12行目でエラーが出てる!何か /zoom: 1; がInvalidなCSSっぽい!』って感じで分かるので、変にハマって時間を取られません。
「/」以外にも単純な文法違反でもちゃんとエラーが返ります。
例えば、、、
.item {
width: 350px;
}s
何か、} の後に s が残ってる!!!(きっと、Ctrl+SしたつもりでCtrlが押せてなかったんですね)とかでもちゃんとエラーになるので、ケアレスミスが原因で時間を取られてしまう事が減ると思います。
記事書いてて思いましたけど、これって結構ステキですね。
互換性の話だったのに、気付けばエラー処理の話になってしまいましたが、こんな感じで今のCSS知識はそのまま使うことが出来ます。