Preprosが今のところwindowsで最も使い勝手の良いscss(sass)のコンパイラじゃないの!

※この記事はsass, compassっていうなんか便利そうだけど難しそうなのをちょっとでもやってみようなwindowsユーザー向けですー。

以前scss(sass)のことを書いた際koala がオススメだよ!っと書きました。( windowsユーザーですのでね…

しかしながら今一番使いやすいんじゃないかと思うのが今回書いた Prepros というコンパイル(プリプロセッサ)アプリ。

なんでこれを紹介するかって、compassで画像スプライトを作るという記事を書きたいからなんですよ。

compassRuby入れてインストールしてあーだこーだ、ってのはちょっと敷居が高いので前もってコンパイラを紹介しておく手口。

 

Preprosにできること

  • だいたいのプリプロセッサ言語に対応 (sass, compass, cofee script などなど)
  • ライブブラウザ対応
  • コンパイル時に通知してくれる
  • @import 監視
  • httpサーバー内蔵

という至れり尽くせりの極み、正直こんな使いこなされへんレベル。

 

Prepropsのダウンロード、インストール

Prepropsサイトへ行ってちょっと下にスクロール、Download Preprops 【バージョン】 ※2013.06.19 現在 1.7.0

この画像だと左下
この画像だと左下

exeファイルをダウンロードしてインストール。

指示に従うだけなので割愛。

 

起動からのちょっと使ってみたり

機能がてんこもり過ぎて全く紹介しきれないですけども。

流れとしてはプロジェクト追加→起動してる状態でファイル保存→勝手にコンパイルしてくれる!

です。さていきましょう。

 

プロジェクト追加

フォルダまたはファイルごとドラッグ&ドロップすればいけます。

D&D
D&D

左下 +マークでも可。

 

プロジェクト画面

プロジェクトを追加すると左サイドバーにプロジェクト、中央にファイル。

ファイルをクリックでファイルごとの設定ができます。

Preprops_eyecatch
とにかくなんでもできる

その他諸機能は触ればわかると思います(つд⊂) (反響があったらちゃんと書きますので

 

ということで使ってみるよ

ぼくは最近使い始めたのでそんなに慣れてないところがポイント!

/**
 * Preprops 使ってみたサンプル
 */

// compass ready (このサンプルだと一切関係ないです)
@import "compass";

$pink: #f01d4f;

$link-color: $pink;
$link-hover: darken($link-color, 9%);

$base-width: 980px;

// sample class
.sample {
	width: $base-width;

	a {
		color: $link-color;
	}
	&:hover {
		color: $link-hover;
	}

}

↑ これをコンパイル、というかPrepropsが監視してくれているのでコンパイル自動でされると ↓

@charset "UTF-8";
/**
 * Preprops 使ってみたサンプル
 */
.sample {
  width: 980px;
}
.sample a {
  color: #f01d4f;
}
.sample:hover {
  color: #d10e3c;
}

はい、ちゃんとできました。通知でお知らせしてくれます。

成功のお知らせ
成功のお知らせ

もし何かエラーがあると…

エラーだってさ
エラーだってさ

こちらもちゃんとお知らせしてくれました。

 

ホホまとめ

cssをある程度書けて多少なりとも興味があるならばcompass, sassは是非とも使うべきだと思います。

以前ちらりと書いた scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり を是非見て頂ければ。

ちなみにぼくはRubyにcompassインストールして使ってますけども、こうも簡単ならアプリに乗り換えること充分検討できます。

まぁ何にせよ、ようやくスプライト画像をcompassで実現する、という記事を書く用意ができたということで。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメント、してみません?

%d人のブロガーが「いいね」をつけました。