SHOEISHA iD

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

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

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

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

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

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


Sassのインストール

 SassはRubyで実装されているため、まずRubyをインストール必要があります。次の手順でRubyをインストールしましょう。

Windows環境

Rubyのインストール

 はじめにRubyのインストールを行います。Rubyの公式ページから、それぞれの環境にあったインストーラをダウンロードしてください。

 今回は「rubyinstaller-2.0.0-p247.exe」をダウンロードしました。

 ダウンロードした「rubyinstaller-2.0.0-p247.exe」の実行が終わったら、スタートメニューからコマンドプロンプトを開いて「ruby -v」と入力します。

 Rubyのバージョンが確認できたら成功です。

Sassのインストール

 SassはRubyのパッケージ管理ツールであるRubyGemを利用してインストールすることができます。先ほどのコマンドプロンプトから「gem install sass」と入力します。Successfully installed sassと表示されたら、成功です。

 インストールが終了したら「sass -v」と入力し、バージョンを確認してみましょう。

Mac環境

Sassのインストール

 Macには標準でRubyがインストールされているため、Rubyのインストールは不要です。

  はじめにSassのインストールを行います。まずはアプリケーションフォルダからターミナルアイコンをダブルクリックしてターミナルを起動します。

  ターミナルを起動したら「sudo gem install sass」と入力してSassをインストールします。その後パスワードの入力が促されますので、ご自身のパスワードを入力してください。

Password:(自分のパソコンのパスワードを入力してください)

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

  ためしに「sass -v」とコマンドを入力してみてください。インストールされているSassのバージョンが表示されるはずです。

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

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

SassとCompassをつかってCSSを効率作成しよう連載記事一覧

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/7522 2013/12/17 13:28

イベント

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

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

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

メールバックナンバー