2013年1月31日木曜日

今更ながらSass、Compass、Sublime Text 2をWindowsに導入してみている


ご無沙汰しております。寒中お見舞い申し上げます。
さて、最近は変数が使えるCSS管理コードと呼べば良いんでしょうか、そんな感じの言語が結構前からあります。

SassとかSCSSとかLESSってなんだ

  • Sass
  • SCSS
  • LESS
「LESS」や「Sass」のようなCSS拡張メタ言語は、960.gsなどのフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。
CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CSSが苦手とする大規模サイトやWebアプリケーションの構築に欠かせない再利用性を高められます。
一部改変：via

つまり、ある程度規模のあるウェブサイトならCSS全体で共通する値とかルールとかがあり、それらをCSSを拡張することにより使えるようにしたメタ言語、ということになりますね。まさに紙のデザインで言うところの指定紙になるような設計書を書くイメージでしょうか。

導入検討の意図

こういったツールは前から気になってはいたものの、Dreamweaverの保存即アップロードや、サイトを管理するGUI、差分を撮ってファイルをアップロードする機能、DIFFツールと連携できるところなどにかなり便利さを感じてしまっており、オーサリングツールを変える気にはなれませんでした。
ですが最近はスマートフォン対応、複数のDPIへの対応、MediaQueriesの対応などが必須となり、ページ単価は上げられないのに作業量は倍々で増えていくという地獄状態になっているので、作業量緩和のためのツールとして、覚えてみようかな、と言う次第です。

目標

Windows7-64bitで、オーサリングツール(Dreamweaverの代わり)を入れ、そこでSCSSをビルドすると自動的にFTPサーバーへアップロードされる様なもの。

障壁

今回障壁になったのは下記のようなこと。
  • そもそもSublime Text(オーサリングツール)を使ったことがない
    • なのでショートカットキーとかパッケージとかわからない
    • 何ができるのかもわからない
  • 当然SassもLESSもSCSSも使ったことがない
    • どう書いて良いのかわからない
  • オーサリングツールと拡張CSSのコンパイラの連携とかCompassとかよくわからない

概念について

  • SassとSCSSって？
    • Sassには二つの構文があります。一つ目は、SCSS（Sassy CSS）として知られ、このドキュメントを通じて使われている、CSS3の構文を拡張したものです。全ての有効なCSS3スタイルシートは、SCSSファイルとしても有効です。加えて、SCSSは多くのCSSハックと、IEの古いフィルタ構文などのブラウザ固有の構文が使えます。この構文は、以下で説明するSassの機能で拡張されています。SCSSの構文で書かれたファイルは、.scssの拡張子を持ちます。
    • 二つ目は古い構文で、インデント構文（単に“Sass”とも言われます）として知られているもので、CSSを書くのに、より簡潔な方法を提供します。この構文では、セレクタのネストを表すのに、カッコよりもインデントを、プロパティを区切るのに、セミコロンよりも改行を使います。一部の人は、SCSSよりも、この構文が読みやすく、また、速く書けることに気づきました。インデント構文は、SCSSと同じ機能を持っていましたが、やや構文が異なっていました。この違いは、インデント構文のリファレンスで説明しています。インデント構文で書かれたファイルは、.sassの拡張子を持ちます。
    • つまり、SCSSはSassとは互換のない上位バージョンのSass、と思っておけばよいようです。
  • どうやって動かすの？
    • SCSSはrubyで動く。なのでOSにrubyをインストールする必要がある。
    • コマンドラインでコンパイルすることが前提。vimとか使ってる人向けだった。
    • Sublime Textをオーサリングツールとして、必要なパッケージをインストールすることでオーサリングツール上で使えるようになる。
    • 基本的には、SCSSを書く、コンパイル(ビルド)する、CSSをアップロードする、と言う流れ。
    • 自動でアップロードとか、自動でビルドとかはSublime Textにパッケージを入れることで解決する。

手順

  1. rubyをインストール
    1. Ruby Installer for Windows
  2. gemのアップデート
    1. gem update --system
  3. Sassのインストール
    1. gem install sass
  4. Compassのインストール
    1. gem install compass
  5. Sublime Text 2のインストール
    1. http://www.sublimetext.com/2
  6. Sublime Text 2の設定
    1. 一番参考になったページはこちら
    2. その次に参考になったページはこちら
    3. 詳細は二学期ですこちら
      1. パッケージのインストール
        1. SCSS
        2. SCSS Snippets
        3. Compass
        4. そのほかHTML5やCSSを入れておくと吉。
      2. テーマのインストール
      3. Projectの作成
        1. ProjectファイルはProjectのフォルダのルートに置いておく？
          1. マルチバイトを含むファイルパスにProjectファイルがあるとCompassが動かない！！
    4. さらにFTPで同期できるように設定
      1. 詳細はこちら
    5. 保存時にビルドするパッケージをインストール
      1. SublimeOnSaveBuild

躓いたポイント

  • 基本的にProjectのディレクトリもProjectファイルを保存する場所も、マルチバイトを含むパスに置かないこと。
  • Projectファイルを保存しないとCompassが使えない。
  • SASS Buildはなくても動く。最低限は上記3つのパッケージ。
  • config.rbが適用されないときはST2を再起動してビルドして保存すると適用される？

残りの課題

  • SCSSを使いこなす
時刻:
ラベル: , , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)