2018夏のweb制作無料相談会(名古屋当日)
2018夏のweb制作無料相談会(名古屋当日)
2015.07.15

CSSの常識が変わる!「Compass」の基礎から応用まで!

(編集部注*2013年2月7日に公開された記事を再編集したものです。)

こんにちは、デザイナーの王です。

今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。
全くの初心者でも問題ありません!

はじめに結論を言うと、CompassでCSSを書くと

  • 早い!
  • 見やすい!
  • メンテしやすい!
  • コード量がぐっと減る!
  • 一度使い出したら最後、もう元には戻れない!

一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず!
簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください!

Compassとは?

Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。

Sassとは

では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sheets」でCSSのメタ言語です。「メタ言語」とは、ある言語を生成するための言語なので、この場合「Sassという言語で記述したファイルをコンパイルして、CSSファイルを生成する」ということになります。

「ええ?コンパイル?CSSを生成?それなら最初からCSSを書けば済む話じゃないの!?」と思う人もいるかもしれません。
しかし、冒頭にも言ったように、Sassで記述すればさまざまなメリットがあるので、CSSよりもSassで書いた方がいいと思います。

Sassについての詳しいことは下記リンクで見ることができます。

Sass: Syntactically Awesome Style Sheets

Sassの文法について

基本的にCSSと何ら変わらないので、極端な話100%CSSの文法で書いても全く問題ありません! これで一安心ですね!
しかし、折角Sassで書くなら機能をフルに活用したいので、まずはSassの基礎知識を把握しておきましょう!

SassとSCSS

Sassは、SassとSCSS(Sassy CSS)の2種類の文法で記述できます。一般的にはSCSSが使われています。違いは以下を見れば一目瞭然。

SCSS

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Sass

table.hl
  margin: 2em 0
  td.ln
    text-align: right

見ての通り、Sassは'{}’の代わりに、インデントを使って階層を見分けています。どちらが優れているのかは人それぞれだと思いますが、現在の主流はSCSSなので、今回はSCSSで書いていきたいと思います。

※もしSassの文法を使いたければ、ファイルの拡張子を.sassにすれば大丈夫です。

Sassを使うには

Sassはコマンドラインソフトなので、基本的にコマンドを打って使います。ただ最近ではGUIのソフトも増えてきているので、両方あわせて紹介しますね。

コマンドラインで使う

コマンドラインとは言え、別にそんなクレイジーなことはやらないのでご安心ください。

※SassはRubyで書かれているプログラムのため、動かすにはまずRubyをインストールしておく必要があります。

Macでのインストール

MacではRubyがプリインストールされているので、Rubyのインストール作業は不要です。このままSassをインストールしちゃいましょう。

まず、ターミナルを開いて、下記のコマンドでSassをインストールできます。
sudo gem install sass
当たり前ですが、インターネットが繋がってない環境ではインストールできません。

Windowsでのインストール

まずはRubyをインストールしましょう。
下記リンクからダウンロードしてインストールしておいてください。
Rubyの公式ダウンロードページ:
http://rubyinstaller.org/downloads/
インストール後コマンドプロンプトからRubyのコマンドが使えます。Sassのインストール方法自体はMacと一緒ですので、割愛します。

GUIソフト

  • CodeKit(Mac)

スクリーンショット 2014-11-20 0.49.39

Macユーザならオススメです!
Sassだけに限らず、Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript、Compassと多種多様なメタ言語を自動コンパイルしてくれる優れもの。他にもlive reload(ファイルをセーブされるたびにブラウザを自動的にリロードする)やjsLint(JavaScriptの文法チェック)など便利機能が盛りだくさん!

  • Hammer(Mac)

Hammer

Sass、CoffeeScript、HAML、Markdownなど、多彩なコンパイラを持ちながら、HTMLのインポート、画像プレースホルダ、変数の使用など独自の機能も多数盛り込まれたユニークなアプリです。

  • Scout(Win&Mac)

WindowsとMacのどっちでも動くフリーソフト。ちょっと機能が貧弱ですが、普通に使う分には十分だと思います。

  • Prepros(Win&Mac)

prepros

WindowsとMacのどっちでも動くフリーソフト。さまざまなプリプロセッサ言語に対応しており、live-refreshなどの機能もかなり充実しています。

  • Koala(Win&Mac&Linux&Ubuntu)

windows

さまざまなプラットフォームで動くプリプロセッサです。Less、Sass、Compass、CoffeeScriptをサポートしています。

  • Compass.app

Compassの公式のアプリを使ったことはありませんが、見たところ大して目新しい機能もないと思うので、MacユーザーでしたらCodeKitをオススメします。