SHOEISHA iD

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

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

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

CSS拡張メタ言語「Sass」の概要と導入手順

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


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

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

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

はじめに

 CompassはSassを拡張したツール集で、CSSのフレームワークといわれています。大手企業でも導入されていて、オイシックスでもデザイナーを中心に導入したいという声が上がっていました。

 本連載ではSassの導入から始めて、Compassの実践までご紹介します。まずはじめはSassの導入部分です。WindowsとMac環境での環境構築から動作確認までをご紹介します。

対象読者

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

Sassとは

 Sassは、CSSを拡張したメタ言語です。ではメタ言語とは何かと言うと、プログラム言語を作成する言語といわれています。つまりSassは、CSSを作成するためのメタ言語です。Sassを使ってCSSを作成するのです。

 「だったら最初からCSSを書いた方が早いのでは?」と思うかもしれません。ですがSassを利用すると、効率的にCSSを作成できます。例えばSassを使うと、プログラム言語では当たり前の変数や繰り返し処理を使ってCSSを書くことができます。それだけでも相当のコード量を減らし、作業量の削減にもつながることを理解していただけるのではないでしょうか。

Sassのメリット

 Sassを導入するメリットを具体的なコード例を交えつつ、いくつか挙げてみます。

  • 読みやすい
    ネストして書けるので可読性が高いです。
Sass
ul{
    margin:5px;
    li{
        float:left;
    }
}
出力されるCSS
ul {
  margin: 5px;
}
ul li {
  float: left;
}
  • 変数や繰り返し処理が使える
Sass
$buttonImgList: cart, label, item;//配列
@each $buttonImg in $buttonImgList {
    div.#{$buttonImg} {
        background-image: url(shared/img/#{$buttonImg}.png);
    }
}
出力されるCSS
div.cart {
  background-image: url(shared/img/cart.png);
}
div.label {
  background-image: url(shared/img/label.png);
}
div.item {
  background-image: url(shared/img/item.png);
}
  • 成果物の品質を統一できる
    HTMLの構造に沿ってSassを記載するため、CSSにしたときの成果物のクオリティが同一になります。
     
  • 高速化につながる
    Sassでは、CSSコンパイル時にファイルの難読化が設定できますし、複数ファイルを1つのCSSにまとめられるため、ファイルの容量とリクエスト数を減らすことが可能です。
     
  • //で1行のコメントが書ける
    CSSを書いている人であれば、皆コメントが面倒だと思っていたのでないでしょうか。Sassでは//を利用して一行コメントが利用できます。
     
  • 関数が作れる
    mixinやfuncitonという関数のようなものが使えるため、部品として使いまわすことが可能です。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
Sassのインストール

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

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

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7522 2013/12/17 13:28

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング