以前ご紹介した、CSSフレームワーク「Compass」の導入手順と良く使う便利な機能をご紹介します。
前回の記事はコチラ。
目次
簡単な導入・使用手順
それでは、最初に導入～実用までにかかる手順を簡単にまとめます。
Rubyのインストール：3分
Compassは、Rubyというスクリプト言語を使用するので、まずはそのRubyをインストールします。
Macでは予めインストールされているのですが、Windowsには入っていません。
Compassのインストール：1分
Gemと呼ばれるライブラリやモジュールをインストールするコマンドを使ってインストールします。
Compassプロジェクトの新規作成：5分
同じくGemを使ってCompassもインストールします。
Compassプロジェクトの設定：3分
Compassを使って作成するプロジェクトの階層を指定し、新規プロジェクトを作成します。
自動コンパイルの設定：1分
Sassファイルを編集するごとにコンパイルしてると手間なので、保存すると同時に自動コンパイルできるように設定します。
各手順の詳細
Rubyのインストール
1.Rubyの公式サイトからexeファイルをダウンロードします。
コチラから、ダウンロードを選び、最新版のインストーラーをダウンロードします。
2014年12月時点では、2.1.5でした。
「Download」をクリックします。
左上がexeファイルです。最新バージョンを入れておきましょう。
exeファイルを実行します。
exeファイルをダブルクリック！
ウィザードに従って進めていきます。
もちろん日本語ですね。
「同意する」を選択し「次へ」。
ここ要注意です！「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れましょう！これが入っていないとWindowsの、システムの詳細設定から環境変数を登録しないといけません(-_-;)
完了をクリックしたらRubyのインストール完了です。
注意点は1つ前の環境変数PATHだけ、他はそのまま進めばOKです。
インストール完了の確認
念の為Rubyがインストールできたかの確認もしておきましょう。
コマンドプロンプト(Windowsの、黒い画面です。苦手な人も多いと思いますが、そんな難しい事はしないので大丈夫！)を使って確認します。
スタート⇒すべてのプログラム⇒Windowsシステムツール⇒コマンドプロンプト
で立ち上げます。バージョンによっては違う場合もありますが、ショートカットキー「Win+R」で「cmd」と入れても起動できます。
起動したら、
[ruby]
ruby -v
[/ruby]
と入力しましょう。
ruby 2.1.5p273 (2014-11-13 revision 48405) [x64-mingw32]
C:\Users\owner>
[/ruby]
このようにRubyのバージョンが表示されたら、インストール完了です。
Compassのインストール
コマンドプロンプトで、Gemを使い、Compassをインストールします。
[ruby]
gem install compass
[/ruby]
Rubyと同じように、インストールできたか確認しておきましょう。
[ruby]
C:\Users\owner>compass -v
Compass 1.0.1 (Polaris)
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
C:\Users\owner>
[/ruby]
バージョン確認ができたらインストール完了です。ちなみに、CompassをインストールしたらSassも一緒にインストールされます。
Compassプロジェクトの新規作成
Compassは、プロジェクトとして作成・使用します。
なので、ファイルを作成したいディレクトリを決め、ここからはコマンドプロンプトでそのディレクトリに移りコマンドを打つ必要があります。
まず、コマンドプロンプトの「cd(チェンジディレクトリ)」を使い、任意のディレクトリに移りましょう。
試しに、Cドライブ直下にsampleというディレクトリを作り、そこにcompassという名前でプロジェクトを作りたいと思います。
[/ruby] これで、まずCドライブ直下に移ります。
そこにsampleというディレクトリを作ったら、次にそのsampleに移りましょう。 [ruby] C:\Users\owner>cd /
C:\>cd sample
C:\sample>
[/ruby]
コマンドを入力するポインタ左側が今いるディレクトリになります。
[ruby] C:\Users\owner>cd /C:\>cd sample
C:\sample>compass create compass
directory compass/
directory compass/sass/
directory compass/stylesheets/
create compass/config.rb
create compass/sass/screen.scss
create compass/sass/print.scss
create compass/sass/ie.scss
write compass/stylesheets/ie.css
write compass/stylesheets/print.css
write compass/stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
You may now add and edit sass stylesheets in the sass subdirectory of your proje
ct.
Sass files beginning with an underscore are called partials and won’t be
compiled to CSS, but they can be imported into other sass stylesheets.
You can configure your project by editing the config.rb configuration file.
You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]
More Resources:
* Website: http://compass-style.org/
* Sass: http://sass-lang.com
* Community: http://groups.google.com/group/compass-users/
To import your new stylesheets add the following lines of HTML (or equivalent) t
o your webpage:
<head>
<link href=”/stylesheets/screen.css” media=”screen, projection” rel=”styleshee
t” type=”text/css” />
<link href=”/stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/
css” />
<!–[if IE]>
<link href=”/stylesheets/ie.css” media=”screen, projection” rel=”styleshee
t” type=”text/css” />
<![endif]–>
</head>
C:\sample>
[/ruby]
「compass create プロジェクト名」と入力すれば、新規作成できます。
任意のディレクトリ内に、新規で作成する為に付けたプロジェクト名のディレクトリが作成されているか確認してみましょう。
できていたらその中に、
・config.rb
・sass
・stylesheets
というファイル・ディレクトリが作成されていると思います。
config.rbが、Compassの設定ファイル、sassディレクトリがSassファイルを保存するディレクトリ、stylesheetsがコンパイルして生成されたCSSファイルの保存ディレクトリになります。
Compassプロジェクトの設定
新規プロジェクト作成でできているディレクトリは初期設定で、config.rbを編集すれば変更できます。
例えば、sassファイルはscssというディレクトリに、cssファイルはcssというディレクトリになど、ファイルを格納するディレクトリを変更したい場合は、config.rbを開き、以下の設定を変更し、該当のディレクトリを新規で作れば完了です。
初期のconfig.rb抜粋
[ruby]
# Set this to the root of your project when deployed:
http_path = “/”
css_dir = “stylesheets”
sass_dir = “sass”
images_dir = “images”
javascripts_dir = “javascripts”
[/ruby]
任意のディレクトリ名に変更します。
[ruby]
# Set this to the root of your project when deployed:
http_path = “/”
css_dir = “css”
sass_dir = “scss”
images_dir = “img”
javascripts_dir = “js”
[/ruby]
あとは、該当ディレクトリを作っておけばOK。
初期に作成されたsassディレクトリにあるscssファイルは、そのまま新たに作ったscssファイル保存ディレクトリに移動しましょう。移動したら、初期のディレクトリは削除してもOK。
cssはコンパイルすれば生成されるので消してしまっても大丈夫です。
自動コンパイルの設定
これで、コンパイルすれば任意のディレクトリに、任意のプロジェクト名でファイルが保存されます。
が、毎回変更する度にコンパイルするのも面倒ですよね。
なので、保存したら自動的にコンパイルされるように設定しましょう。
C:\sample\compass>compass watch //このコマンドで、自動監視スタートです。
>>> Compass is watching for changes. Press Ctrl-C to Stop.
[/ruby]
試しにscssファイルを作成して保存してみましょう。
cssディレクトリに、同名.cssファイルが自動的に保存されています。
Compassを使ってみよう
Compassを使うにはまず、Compassで用意されているモジュールをインポートする必要があります。
scssファイルの先頭で、以下の記述を入れるとインポート完了です。
[/css]
これで、面倒なベンダープレフィックスやCSS3の記述を短いコードで表す事ができるようになります！
.scssファイル
[css]
@import “compass”; //Compassのメインモジュールをインポート
div{
@include inline-block;
@include box-shadow( 0 0 10px #ccc);
@include opacity(.8);
}
[/css]
コンパイル後のcssファイル
[css]
/* line 3, ../scss/style.scss */
div {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
}
[/css]
ここで紹介したもの以外にも、たくさんの便利なmixinがあり、かなり作業を効率化できますので、色々と調べて使ってみてください♪
書籍もありますが、このサイトさんなんかオススメです♪
