デザイナーの為のSass/Compassのすゝめ

デザイナーの為のSass/Compassのすゝめ三月とはいえすっかりもう桜が咲き、杉花粉で目と鼻を塞がれ
これで耳と口も塞がったらさながら『ライ麦畑でつかまえて』の主人公だななどと思っています。ゆーじろーです。

今回はSass/CompassについてのHowtoを書かせていただきます。

SASS
compass

と思ったのですが、この系統は既に数多くの良いドキュメントがあるので
別の方向で書く事にしました。

Sass/Compassはより管理しやすく、多くの機能をCSSにもたらしましたが
便利であるためにより慎重に扱わないと粗雑なスタイルシートが吐き出されてしまいます。またありがちな食わず嫌いによって未だにCSSプリプロセッサに触れた事が無い方がいらっしゃるのも事実です。

本稿ではそうった誤解の解決や使う上での注意点を纏める事にします。

その1:誤解

  1. コマンドラインを使うのは難しい
  2. コマンドライン使うのってメンドクサイ
  3. SassとCompass両方勉強しないといけない
  4. SassってRuby使えないといけないんでしょう?
  5. Sassは全く違う構文使うんだよね
  6. SassってRuby on Railsで動作するんでしょ?
  7. Sassは空白と小文字が区別されるらしいじゃない


実際:

  1. コマンドラインはそんな難しくないです。
    タイピングゲームで遊んだ事はありますか?ブログを書いた事は?
    キーボードを初めて叩くので無い限り、いくつかのキーワードを覚えるだけでコマンドラインは使えます。覚えなければならないキーワードも、世の中にあふれるパスワードよりはよほど短く簡潔です。
  2. そもそもコマンドラインを使うのは稀です。
    ディレクトリに移動してインストールして、インストールが終わったらプロジェクトを作るかwatchコマンドでファイルを監視するくらいでしか使いません。
  3. SassとCompassは仲間です。
    あなたが初めてCSSプリプロセッサを学ぶとしたらSassを覚えるのには少しだけ苦労するかもしれません。ですが学んだ後であるならば、Compassで覚える事は苦にならない程度でしかありません。
  4. SassはRubyを知らないと使えないですって?とんでもない!
    Sassを使う上で使用するRubyファイルなんてありません。
    Compassでも使うのは設定用のconfig.rbファイルくらいなものですし、これの編集にRubyの知識は使いません。
  5. ご安心を。
    Sassの構文はまさしくあなたが慣れ親しんできたCSSそのものに、ほんの少しだけアレンジが加わった物でしかありません。
  6. Sassを使用するのにはRuby環境が必要なのは間違いありません。
    ですが吐き出されるCSSはよくある普通のCSSです。CSS対応ブラウザなら動作します。
  7. Sassはたしかに。
    でもSCSSはそんなこと気にする必要ありませんよ?

引用:http://sonspring.com/journal/sass-for-designers

今までCSSを触れてきた方でしたら、数多くの良質なサイトを見る事ですぐにSass/Compassを使いこなせると思います。

その2:気をつけなければならないこと

Sass/Compassは確かに便利ですが、いくつかの事柄に注意しなければ高速化とは無縁の重たくて猥雑なスタイルシートが吐き出されてしまいます。

入れ子しすぎたセレクタ

例えば次のようなソースです。

body{
    #wrap{
        #header{
            #title{
            }
        }
    }
 }

これは特に気をつけなければならないことです。
フロントエンドで高速化に気をつけるのであれば入れ子セレクタはなるべくしない方が懸命です。
Sassを導入してると管理のしやすさからついネストしたくなる衝動にかられることがありますが、管理のしやすさとパフォーマンスはまた別の話です。

mixinの多用

もし、全く同じmixinを多用するようなことがあったらそれは独立させてextendさせた方が良いかもしれません。
場合によってはDOMツリーの走査よりも重くなる可能性があります。

一つのSassファイルで作業する

高速化ではcssの@importはしないほうが良い物でしたが、sassの場合はimportしたファイルを結合してくれるので問題ありません。
いくら効率的に書けるのSassといえど、大規模開発になればやはり長いコードを書きがちです。
役割ごとに分割してしまいましょう。
その際スタイルシートの特性を利用して要素系、ボックス系、ボタン系などと分割するとセレクタが競合しにくい管理が出来ます。

//ベース読み込み
@import "_base.scss";
//フレーム読み込み
@import "_frame.scss";
//ボタン読み込み
@import "_button.scss";

いかがでしたでしょうか。
食わず嫌いな方もこのポストがCSSプリプロセッサに触れるきっかけになれば幸いです。
最後までご覧いただき、ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です