hagetak's blog

どうも、はげたかです。

今日の一言:カテゴリ分けをしっかりしたらPVあがるかな?

WindowsでCompass環境を整えてみた

f:id:hagetak:20140126005111j:plain


今更ながら、compassの環境を整えてみた。
きっかけは単純で、いろんなものに触れておきたいからだ。
今まで、様々なブログを読んできて、わからないもの(Vagrantとか)をわからないものにしていたが、今度からは様々なものに触れ、経験をしていきたい。

はじめに

  • Compassというのは、Sass, Scssの進化系みたいなもの。
  • Sass, Scss とは、cssを簡単に書けるもの?


SassMeister | The Sass Playground!
このサイトは、ネット上でscssの凄さが分かるものです。
試しに使ってみましょう

a {
    color:red;
    &:hover{
        color:blue;
    }
}

をSCSS側に入力すると、

a {
  color: red;
}
a:hover {
  color: blue;
}

と出力される。
この程度じゃ、使える!って実感できないが、ホームページを作るとなると、かなり変わってくると思う。

開発環境

インストールしてみよう

まず、Compassをインストールするために、rubyのインストールが必要となる。
その後、Sassのインストールをする。

rubyのインストール

ダウンロード
下にあるWindows用のをダウンロードすれば良いでしょ。
自分は、この際だからRails付きのをダウンロード、インストールしてみた。

すでにrubyをインストールしている方はこの部分はパスしてよし。

sassのインストール

コマンドプロンプトで、

gem install sass

と入力すると、Sassのインストールが開始される。

インストールされたか確認とアップデートの確認も兼ねて、

gem update sass

を入力する。
エラーが出なければ、インストールされてる。

compassのインストール

先程と同様に、コマンドプロンプト

gem install compass

と入力。
確認は、

gem update compass

で良いだろう。

以上の手順で、compassのインストールは終わり。

compassの使い方

コマンドプロンプトで、

mkdir hoge
cd hoge
compass create

と打ってみましょう。
そうすると
f:id:hagetak:20140126011141p:plain
このようなフォルダ、ファイルが作られる。
(index.html, main.css, main.scss は自分が作成した)

.scssファイルをいじり、コンパイルを書けることで、.cssが更新される。
最初にあげたコードをscreen.scssに書いてみる。

コマンドプロンプトから

compass compile

と打ち込む。
そうすると、
screen.cssが更新される。

コンパイルを行うときのディレクトリは、config.rb と同じでないといけない。

ちなみに、

conpass watch

とやっておくと、常に監視し、.scssが更新される度に.cssを書き換えてくれる。

さいごに

まだ、一からサイトを作ってはいないが、便利そうだなというのがある。
Sublime Text でコンパイルする方法は後日、記事に上げたいと思う。
使い方を文で表すのは難しいな、もう少し文章力がほしいところ。

詳しい使い方は参考サイトをどうぞ

広告を非表示にする