node.js

Codekitを使ってみたら超絶便利だった件。

piro_deno、、、、、、、、、、、コメントする

最近CSSメタ言語を使用している人が増えていると思いますが、コンパイルする環境を整えるのが面倒だったり苦手で手を出してない人も多いのではないでしょうか？

SassだとRubyを入れて、Stylusだとnode.jsを入れて、、など環境整えるのって僕も苦手です。

そこでMac Lion以降のみ対応ですが、Codekitというアプリが超絶便利すぎるので使い方をまとめてみました。

ブログを書いている時点でのCodekitのバージョンはVersion 1.0 (6010)

Codekit

コンパイルできるファイル

  • less
  • sass/scss
  • stylus
  • haml
  • jade
  • javascript
  • coffee script

これだけの言語？をコンパイルすることができます。とりあえず入れとけ！って感じの対応数です。

ブラウザの自動リロード

これだけの為に入れてもいいくらい便利な機能です。対象ファイルが変更されると自動でSafariかChromeで開いている該当ページで変更のあったファイルをリロードしてくれます。

CSSやJSの場合は読み込んでいるファイルのみリロードしてくれるので無駄な待ち時間も発生しません！

guard-livereloadを使って同じことをしてましたが、こちらの方が簡単でいいです。

コンパイルでデバッグ！

当たり前なのかもしれませんが、Sass/Less/Stylusなどコンパイル時にエラーがあれば分かりやすく表示してくれます。

コンパイルしないJSやCSSのも監視対象に入れておけば、ファイル変更時にエラーがあれば表示してくれます。
オプションでデバッグ内容をある程度細かく指定出来たり、使っているライブラリを選ぶとそのライブラリの記述用のデバッグもしてくれるみたい。

いろいろオプションがあるので把握しきれてないですが、GUIが分かりやすいのでちょっと使えばすぐ覚えそうな感じです。

コンパイルオプションで圧縮

sassやらlessやら使っている人にはおなじみかと思いますが、コンパイル時に圧縮するかどうかもチェックボックス一つで選ぶことができます。

圧縮もファイルによって選べる内容が違うので好みに設定しておくといいかもです。

まとめ

ざっくりまとめてみましたが、めちゃくちゃ便利です。

今のところベータ版なのでフリーで使うことができますが、シェアになっても間違いなく買っちゃいますね。

似たようなアプリにLiveReloadというのもありましたが、シェアウェアで試用も出来ないのが残念。。。

余談ですが、FAQのここが個人的にツボでした。

I’m on Windows. What do you recommend I use to work with Less/Sass/CoffeeScript, etc?

A Mac.

Codekitを使ってみたら超絶便利だった件。

stylusのライブラリnibを試してみた。

piro_deno、、、、、コメントする

SassにCompassという強力なライブラリがありますが、StylusにもNibというライブラリがあるのを最近知ったのでちょっと使ってみた。

nib – CSS3 extensions for Stylus

環境：Node.js -v0.6.11

nibを使う環境を作ってみる。

個人的に環境作成が一番苦手なので、とりあえずexpressでstylus入れると伴にごにょごにょやったらいけた。

expressでとりあえずstylusをインストール

$ express nib_sample -c stylus

nibをnpmでインストール。

$ npm install nib

canvasをnpmでインストール。

$ npm install canvas

念のためもろもろ関連モジュールインストール

$ npm install -d

さて、node.js+stylusの環境は整いましたが、これだとnibが使えないので、まだ手を加えてないapp.jsに追記する。

requireにnibとstylusを追加。

var express = require('express')
  , routes = require('./routes')
  , stylus = require('stylus')
  , nib = require('nib');

コンパイルオプション用関数追加。

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(nib());
}

stylus呼び出し部分に追記compileオプションを追記。

app.use(stylus.middleware({ src: __dirname + '/public',compile: compile }));

以上で環境作成完了。どっかで詰まるかと思ったけど案外すんなり導入できました。

nibを試す

nibをimportするだけでそのドキュメント内で便利なメソッドを使うことが出来ます。

@import 'nib'

便利機能１：ベンダープレフィックスが自動で付く

ベンダー意識せずに通常のプロパティを書くだけで補完してくれるのは楽でいい。

stylus

border-radius 10px

css

.test{
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

便利機能２：CSSグラデーションをbase64でも。

主にIE対策。グラデーションの指定にサイズを指定するとbase64で書き出してくれる。デフォルトじゃないので使いたい場合しか動作しないのも嬉しい。

stylus

.sample1
	background linear-gradient(top, white, black)
 
.sample2
	background linear-gradient(600px (bottom left), white, black)

css

.sample1 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
	background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
	background: -moz-linear-gradient(top, #fff 0%, #000 100%);
	background: linear-gradient(top, #fff 0%, #000 100%)
}
 
.sample2 {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAJYCAIAAAAsaRvIAAAABmJLR0QA/wD/AP+gvaeTAAAARklEQVRIidXOsQkAMAzEQNn77+w0CYQMEPRu3nCNYF9VNdBAn//dX2ZoSDFDQ4oZGlLM0JBihoYUMzSkmKEhxQwNlzEzDSzjNwqgeD+EAwAAAABJRU5ErkJggg==');
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0, #fff), color-stop(1, #000));
	background: -webkit-linear-gradient(bottom left, #fff 0%, #000 100%);
	background: -moz-linear-gradient(bottom left, #fff 0%, #000 100%);
	background: linear-gradient(bottom left, #fff 0%, #000 100%)
}

便利機能３：positionの記述が簡略化

.sample1
	absolute top 10px left 20px
 
.sample2
	fixed top 10px left 20px

css

.sample1 {
	position: absolute;
	top: 10px;
	left: 20px
}

.sample2 {
	position: fixed;
	top: 10px;
	left: 20px
}

便利機能４：clearfixの簡略化。

これはsassのextendの方が一つにまとめて書けるから、sassの方が優秀と思う。

2012.4.10訂正：stylusにもextendがあるので併用すればいいだけでした。

stylus

.sample1
	clearfix()
.sample2
	clearfix()

css

.sample1 {
	zoom: 1
}
 
.sample1:before, .sample1:after {
	content: "";
	display: table
}
 
.sample1:after {
	clear: both
}
 
.sample2 {
	zoom: 1
}
 
.sample2:before, .sample2:after {
	content: "";
	display: table
}
 
.sample2:after {
	clear: both
}

便利機能５：text-overflowしたいときに一行で完結できる

僕は良くスペル忘れがちなので非常に嬉しいw

stylus

.sample1
	overflow ellipsis

css

.sample1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

便利機能６：リセットをまとめて書ける。

いろんなCSS読みまくってたり、管理不純に陥ってる場合に地味に嬉しい。
こまかくリセットできる要素を指定できるので使い勝手はいいのでは？（コードは無駄に重くなっていくけど）

各リセットの関数

まとめ

compassは個人的に機能が多すぎて使い切れないんですが、nibくらいだとちょっとした補完+αな感じだと使いやすい印象です。

ちょっと試した程度ですが、自作していたmixinを使わなくて済むのと、コードが非常に完結になるので、今後は積極的に使っていこうかなぁと思ってます。

stylusのライブラリnibを試してみた。

stylusでbackgroundに指定した画像のサイズ変更に対応する。

piro_deno、、、コメントする

スマートフォン向けのcssを書く場合、アイコンなど背景画像として設置することが多いですが、device-pixel-ratioに合わせて高解像度用の画像を用意し、background-sizeでratioの比率に縮小することが多いです。

このとき結構困るのが画像のサイズ、特に横幅が変わってしまうといちいちcssで指定しているbackground-sizeも変えないとならないので、運用を考えると結構めんどくさいです。

うまい方法ないかなぁと考えてたら、stylusに画像サイズを取得するimage-size関数が用意されてたんですね。。。

iconPath = '../images/icon.png'
.icon
  display block
  height 20px
  width @height
  background-image url(iconPath)
  tmp = image-size(iconPath)
  h = tmp[0]/2
  w = tmp[1]/2
  background-size h w

こんな感じで指定してやると、

.icon{
	display: block;
	height: 20px;
	width: 20px;
	background-image: url("../images/icon.png");
	background-size: 500px 50px;
}

半分の画像サイズの値でCSSがコンパイルされてきます（icon.pngは1000px x 100pxの画像）

こうすることで背景に使っている画像のサイズ変更に簡単に対応することができました。

background-positionを%など相対表記していると結局ずれてしまいますが、
僕の場合、アイコンはほとんど::beforeか::after疑似要素を作ってそこに画像を表示させているので、background-positionによるズレを気にしなくてすみました。

最近Sass使ってないから分からないけど、同じような方法がSassにもあると嬉しいなぁ。。

stylusでbackgroundに指定した画像のサイズ変更に対応する。