読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

CSSの常識が変わると噂のCompassを導入!

どうも!chuckです。

今回はフロントエンドに関して。前々から気になっていたCompassを使ってみたいと思いますヽ(=´▽`=)ノ

 

lab.sonicmoov.com

 

 

またLIG様にお世話になってしまった…(´;ω;`)

liginc.co.jp

こちらの記事を元にCompassを導入していきます。

 

CompassやるにはまずSass

CompassはSassを元に作られているらしい。なのでSassをまず勉強しましょうねとのこと。

Sass(SCSS)については、この春勉強を始めて、プライベートで使っています。と言っても、「入れ子」機能ばっかり使ってるだけですけどねw

それでも、Sassの知識があったのでCompassにはすぐ馴染めるかもしれない!そんな希望が生まれました。やってて良かったSassヽ(=´▽`=)ノ

 

chuckwebtips.hatenablog.com

 

さっそくCompass

rubyのgemなんですね!gem install コマンドでインストールします。

f:id:chuck0523:20150808174809p:plain

 

よく使うコマンド

create (新規プロジェクトを作成し、compassの初期化を行う。)

watch (Sassファイルを監視して、セーブされたらCSSコンパイルする。)

この2つのコマンドを覚えておけばOKらしい。ってか、CSSなのにプロジェクトを作成するんですね!

 

プロジェクト作成

さっそくプロジェクトを新規作成します。

compass create demo とコマンド入力。

f:id:chuck0523:20150808182349p:plain

(なにやらファイルが自動生成され、ご丁寧に使い方まで表示してくれています)

 

f:id:chuck0523:20150808182723p:plain

finderで見るとこんな感じ。

 

Compassを書いていく

準備が整ったので、Compassを書いていきます。

sassディレクトリに「myFirstCompass.scss」を新規作成しました。

LIG様のお手本にならって、Scssを書いていきます

f:id:chuck0523:20150808183806p:plain

1行目でCompassをインポートしています。

4〜6行目でCompassで用意されているCSS3のMixinを書きました。

 

ターミナルでwatchコマンドを発行します。

(watchモード?になっている間にscssを保存すると、自動的にコンパイルしてくれるようです。便利!)

f:id:chuck0523:20150808184149p:plain

このとおり!見えづらいですが、最後の「Happy Styling!」がかわいいヽ(=´▽`=)ノ

 

できあがったCSSファイルを見るとこの通り!

f:id:chuck0523:20150808184236p:plain

きちんとCSSに展開されています。

ベンダープレフィックスとか、クロスブラウザを付けてくれてて感動…(´;ω;`)

 

その他のMixinについてはこちらに一覧があるようです。

Compass CSS3 | Compass Documentation

 

まとめ

Compassってもっと難しいものだと思ってたんですが、一度慣れたらなかなか強力なCSSツールになりそうですね!徐々にプライベートで使っていこうと思いますヽ(=´▽`=)ノ

では!

 

お世話になったサイト様

liginc.co.jp