Sass
scss
Compass
windows7

Windows7上へのSass(SCSS)・Compass環境の構築

More than 3 years have passed since last update.


Sassとは


  • CSSの記述を楽にするためにCSSの記法にいくつかの機能を足したもの


    • 変数・計算式

    • セレクタのネスト

    • mixinと呼ばれる関数

    • extendと呼ばれるセレクタの継承



  • YAMLのような字下げで書いていく


    • HAMLと言うらしい




SCSSとは


  • Sassのバージョンアップ時に追加された記法


    • ネストなどがわかりやすくなった

    • プログラマーに非常に優しい




Compassとは


  • Sass(SCSS)の関数(mixin)を集めたもの


    • CSS3のベンダープレフィックス付きのスタイルが簡単に書けるようになる

    • CSSのResetも簡単に行える




Sass(SCSS)のメリット・デメリット


  • メリット


    • プログラマブルに書いていける

    • 変数などを利用し、一括で値を変更することが可能である

    • 関数(mixin)を利用して面倒な書き方を簡略化することが可能である

    • セレクタの継承を利用し、見やすく、かつ、コード量が少ない書き方が可能である

    • 複数ファイルに分けておき、開発時には見やすくコンパイル時には1ファイルに、ということが可能である



  • デメリット


    • Sass(SCSS)のコンパイル環境が必要である

    • Sass(SCSS)に対応したエディタ(統合開発環境)を用意した方がいい




要するに

Sass(SCSS)はプログラマーにとって習得レベルは低く、書きやすいものなので、使っていこう!

ただ、CSSそのものではないので、対応する統合開発環境は欲しいし、そもそもコンパイルする環境が必要…


Sass(SCSS)コンパイル環境の構築


Windowsの設定


  • Dドライブがあるものと想定し、Dドライブ直下に「server」ディレクトリを作成する


  • 7-Zip をインストールしておく


Rubyのインストール



  1. RubyInstaller for Windows から最新版のRubyをダウンロード。


    • あまり環境は汚したくないので、「7-ZIP ARCHIVES」をダウンロードする

    • 現在(2014/07/07)の最新版は「Ruby 2.0.0-p481 (x64)」である

    • 「D:\server」ディレクトリにダウンロードファイルを置く
      1.png



  2. ダウンロードした「7z」ファイルを解凍する。


    • 7-Zipをインストールしていると「ここに展開」というメニューができるので、それを選択して解凍する。
      2.png



  3. 解凍したディレクトリ名を「ruby」へと変更する


    • 上手くいっていれば、「ruby」ディレクトリ内に「bin」「include」「lib」「share」ディレクトリがあるのが確認できる
      3.png
      4.png



  4. Rubyへのパス(ここでは「D:\server\ruby\bin」)を環境変数に設定する。


    • 「コンピューター」→「システムのプロパティ」→「システムの詳細設定」→「環境変数」→「システムの環境変数」

    • 「Path」に「D:\server\ruby\bin」を追記する。

    • Windowsのパスセパレートは「;」であることに注意する
      5.png



  5. Pathを確実に反映させるため、再起動する

  6. Rubyがインストールされていること、Pathが反映されていることを確認する


    • コマンドプロンプトを立ち上げて「ruby -v」と打ち、バージョンが表示されることを確認する
      6.png




Gemアップデート


  • コマンドプロンプトを立ち上げ、「Gem」をアップデートする

参照:Gemのアップデート


gem i rubygems-update

update_rubygems
gem pristine --all


Sass(SCSS)インストール


  • コマンドプロンプトを立ち上げ、「Sass」をインストールする


gem install sass



Compass インストール


  • コマンドプロンプトを立ち上げ、「Compass」をインストールする


gem install compass



インストール確認


  • Sass確認

sass -v


Sass 3.3.8 (Maptastic Maple)

7.png



  • SCSS確認

scss -v


Sass 3.3.8 (Maptastic Maple)

8.png



  • Compass確認

compass -v


Compass 0.12.6 (Alnilam)

Copyright (c) 2008-2014 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

9.png