今さらそのネタwww何言ってんのwwwwオッソwwwww

とか言われないために、そろそろSASSとかCompassとかその辺りを使う環境を整えてみませんか?

便利なのはわかってる。けど・・・

SASSに関する専門書も販売されて講習会なども行われ、これからどんどん目をする機会が増えてくると思います。
すでにネットや周りで噂を聞いて「便利そう」と思ってる人も多いはず。

でもなんで手を出せないのか・・・

  • 今のCSSで十分
  • やろうと思ったけどRubyとかgemとかなんとか書いてて、よくわからない
  • あの黒い画面が苦手

よくわからない?CUI(あの黒い画面)が苦手?もうそんなことは言わせない!!そんなあなたにコレ!!

Prepros

Prepros

はてブ数

https://prepros.io/

Prepros

これマジいいんですよ。英語版ですけど。でもほんとタガログ語の人でも使えちゃうレベル。

とりあえずこれでcompassを使ってみるのはどうでしょうか?
WinでもMacでもこれでいけますし、環境つくるまでがほんと超ラクちん。簡単スリーステップ。

プロアクティブもびっくり

はい、できたー。これであなたのPCでもCompassが動いちゃうよ―。

まじめに動かしてみる

それじゃあマジメにいきますね。

必要なソフトをインストールする

まずPrepros公式サイトからソフトをダウンロードしてください。

MacかWindowsか。
MacかWindowsか

ボクはWindowsなのでそっちの画面で進めますが、Macも似たようなものです。

ダウンロードしたソフトをインストールしてください。

指示通りに進む

英語は読んだふりで [Next]
うぇ。。うぇ。うぇるこめ。。。と

どこにインストールするか選べます。大体そのままの設定でok。

英語は読んだふりで [Install]
適当なフォルダを選んで

インストールが始まるので、終わるのを待ちましょう。

あとは全自動。

待つ。
進むプログレスバー
待つ。
中の人が頑張ってるんだろうなぁ
待つ。
あとすこし。がんばれ。
待つ。
もうゴールが見えてきたぞ
待つ。
くるぞ。。くるぞ。。。。
キタ━━━━(゚∀゚)━━━━ッ!!
フィニッシュ!!

以上であなたのパソコンでcompassを使えるようになりました。
Rubyとかgem install hogeだとか、そんなよくわからない言葉は一切いりません。簡単でしょ。

ファイルをつくってみる

環境が揃ったので、実際にファイルを作ってみましょう。

Preprosはデフォルトではディレクトリ構成が決まっていて、親ディレクトリ(プロジェクト)に子ディレクトリ(sass格納)という構成にしないといけません。
それに合わせて作りましょう。

こんな感じ。
ディレクトリ構成

親ディレクトリはどんな名前でも構いません。子ディレクトリの名前は必ず sass にしてください。
[/sass/]の中に style.scss というファイルを置きます。

CSSを書いてみる

とりあえず、style.scss を編集して、普通のCSSを書いてみましょう。

カタカタカタターン
CSS書いてみる

とりあえずソースコードも。

compassでもなんでもなく普通のCSSですね。

Preprosにファイル(プロジェクト)を登録する

つくったファイルをPreProsに読み込ませます。

style.scssではなく、プロジェクトのディレクトリごとPreProsにドロップしてください。

Drag & Drop
ドロップ

自動的にstyle.scssが読み込まれました。

読み込まれた

これで先ほどのディレクトリがPreprosのプロジェクトとして登録されました。

基本的な設定をする

読み込まれた style.scss を左クリックで選択すると、右から設定メニューがでてきます。

選択するとメニューが表示

ちょちょっと設定。[Use compass] にチェック

読んだ通り、「このファイルはcompassを使うよ!」って設定です。

Use compass

追記された [ Full compass Support ] にもチェック

compassの機能がさらに便利になる機能が有効になります。

Full compass Supportにもチェック

以上で設定は終わり。

コンパイルしてみる

コンパイルというのは、さっきの style.scss を元に style.css をつくるために行います。

でもやり方は簡単。
Preprosを起動している状態なら、style.scssを編集して保存した時に自動的にコンパイルされます。
手動でやる時は、Preprosの右下、compileボタンを押せばコンパイルされます。

コンパイルする
手動でコンパイル

コンパイルが終わったら、右下にポップアップがでます。

成功したら緑
コンパイル成功

もしディレクトリ構成が違ったりCSSの記述が間違っていればエラー。

失敗したら赤
コンパイル失敗

ファイルを確認する

コンパイルが成功すればsassディレクトリと同じ階層に2つのディレクトリが生まれているはずです。

[/.sass-cache/]と[/stylesheets/]
2つのディレクトリが生成された

[/.sass-cache/]はソフトが使うファイルなので無視して構いません。
sassを元に生成されたstyle.cssのファイルは[/stylesheets/]に入っています。

出力されたstyle.css

とはいってもさっきのファイルはそのまんまCSSだったので変化はありません。

もっとcompassしてみる

もっとソレっぽい書き方をしてみましょうか。

変数

変数を使えば、一時的にプロパティの値を保存してあとで使いまわすことができます。

.scss

コンパイルするとこうなります。

.css

ネスト

compassでは入れ子の記述が可能です。

.scss
.css

とまぁcompassの書き方とかは色んなブログの記事で書かれているので、あんまり深くは書きません。

まずは手元にあるCSSを、変数やネストあたりだけで簡単に練習してみてはいかがでしょうか?下の記事とか参考にして、ぜひ挑戦アレ。

CSSの常識が変わる!「Compass」、基礎から応用まで! | 株式会社LIG

CSSの常識が変わる!「Compass」、基礎から応用まで! | 株式会社LIG

はてブ数

http://liginc.co.jp/designer/archives/11623

一体どこまで便利なのか、文字でずらずら書いてもしょうがないので、百聞は一見に如かずということで、簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意しておきましたので、まずはこれを見てみてみよ!

scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 : ホホ冢次男

scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 : ホホ冢次男

はてブ数

http://hayashikejinan.com/webwork/239/

連休中にテーマを作ろうそうしよう。あ、ついでにscssってのとcompassってのがなんかどうも便利っぽいのでちょっと調べてみよっかな。から始まって。結論から言うと「狂おしいほど便利で今までぼくは何をしてたんだ」というレベルでした。