SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

SassとCompassをつかってCSSを効率作成しよう

CSSフレームワーク「Compass」の基礎

SassとCompassをつかってCSSを効率作成しよう(3)

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの一つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します。第3回目はCompassの基礎部分を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • CSSの基礎知識がある方
  • SassおよびCompassの導入を検討している方

Compasとは

 Compassは、Sassを拡張したオープンソースのフレームワークです。第1回第2回でご紹介したSassをより使いやすく、便利にしたのがCompassになります。実際Sassを利用するときは、合わせてCompassも一緒に利用するケースが多いです。

Compassのメリット

CSSスプライトが簡単に作成できる

 Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。

独自のmixinが利用できる

 グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。

独自の関数が利用できる

 画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。

 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。

 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。

  • 読みやすい
  • 変数や繰り返し処理が使える
  • 成果物の品質を統一できる
  • 高速化につながる
  • //で1行のコメントが書ける
  • 関数が作れる

Compassのインストール

 コマンドラインからCompassのインストールを実行します。今回はSassインストールを前提に話をしていきます。もしSassのインストールがまだできていない人は、第1回目の記事を参考にSassをインストールしてみてください。

Windows環境

 Windows環境でのCompassのインストールを説明します。Compassのインストールはコマンドプロンプトから行います。コマンドプロンプトを起動して「gem install compass」と入力し、「Successfully installed compass」と表示されれば成功です。

 ためしに「compass version」と入力してみてください。インストールされているCompassのバージョンが表示されるはずです。

Mac環境

 次に、Mac環境でのCompassのインストールです。Mac環境でも同様にCompassのインストールはコマンドラインから実行します。ターミナルを起動して「sudo gem install compass」と入力します。

 その後パスワード入力が促されますので、ご自身のPCのパスワードを入力してください。

 パスワード入力後に「Successfully installed compass」と表示されれば成功です。

 ためしに「compass version」と入力してみてください。インストールされているCompassのバージョンが表示されるはずです。

次のページ
サンプルファイルの作成と実行

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
SassとCompassをつかってCSSを効率作成しよう連載記事一覧

もっと読む

この記事の著者

鈴木 健二(オイシックス株式会社)(スズキ ケンジ)

オイシックスにてスマホ開発担当。映像製作、DTPなどのデザイナー経験があり、フロントエンドからサーバサイドまで幅広く開発を行っている。現在仙台在住で、毎週東京のオイシックス本社まで通っている。得意分野はJavaScript、CSS。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7772 2014/05/27 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング