StylusでサクサクCSSコーディング【環境構築編】

css, tool

以前はSassを使っていたのですが、聞いたところStylusはSassとLessのいいところどりで豊富な機能を持っているらしいので早速使用する為の環境を構築してみました。

CSSプリプロセッサは、変数や配列、条件分岐などが使えるので、記法を習得すれば圧倒的な速度でCSSコーディングが出来るようになります。(Emmetなんかも合わせたら最強)

とまあコーディングの速度が上がるだけじゃなく、色々と自動で補間してくれたり変換してくれたり、コードの視認性も良くなったり管理しやすくなったりラジバンダリ・・・

■インストール環境
OS:Windows 7 Professional 64bit
editor:sublimeText2

スポンサーリンク

Node.jsをインストール

必要環境という事でNode.jsをインストールします。

公式サイトのDownloadページからインストーラーをダウンロード。
node.js

Node.jsのインストール

Node.jsのインストール

インストーラーを起動。

node.jsインストール2

node.jsインストール2

使用許諾、ライセンスについての説明を読む。
了解したらチェックを入れnext。

node.jsインストール3

node.jsインストール3

インストール先の選択

メインと違うドライブにインストールした場合、途中でうまくいかなくなったのでデフォルトのままで再インストールしなおしました。
node.jsインストール4

node.jsインストール4

カスタムインストール
基本的にはそのままでOK

node.jsインストール5

node.jsインストール5

インストール完了!

node.jsインストール6

node.jsインストール6

node.jsが正常にインストールされているかをコマンドプロンプトから確認。

【windowsキー】+【R】で【ファイル名を指定して実行】ダイアログを表示、【cmd】と入力しenter

node.jsの確認

node.jsの確認

コマンドプロンプトを起動後、以下のコマンドでnode.jsのバージョンを確認。

node -v
node.jsの確認2

node.jsの確認2

これでnode.jsのインストール確認完了。
コマンドプロンプトを開いたまま、続けてStylusをインストールします。

Stylusのインストール

コマンドプロンプトに下記のコマンドを入力。

npm install -g stylus nib
stylusのインストール

stylusのインストール

こういった表示がされればstylusのインストールは完了です。

SublimeText2でビルドを楽にする

sublimeTextを起動、【Ctrl】+ 【Shift】 + 【P】でPackage Controlを起動。

Package Controlを導入していない場合は下記参照
初心者向けEmmetの基本【HTML編】 | CreativeTips

Package ControlのInstall Packageを使い【stylus】をインストール。

【Tools】→【BuildSystem】を見ると、【Stylus】が追加されているので、これでstylusで書かれたコードをビルド出来る様になります。

stylus

stylus

Stylusを使ってみる

折角sublimeTextを開いているので、そのままStylusを試してみました。

【File】→【New File】で新規作成

コードを適当に書き【Ctrl】+ 【Shift】+ 【S】で名前を付けて保存

ちなみにnibも一緒にインストールしているので、ベンダープレフィックス等も自動で付けてくれます。

@import 'nib'

.test
	border-radius 5px
body
	font-size 14px
	#contents
		padding 20px 20px

【Ctrl】+【B】でビルドを実行!コンパイルされたCSSが下記になりやす。

.test {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
body {
  font-size: 14px;
}
body #contents {
  padding: 20px 20px;
}

Sass等と同じくsublimeText2/3でもビルドを出来るので、あとはどんな記法が出来るのかいろいろと触ってみます。

Stylus

この記事が気に入ったら
『いいね』しよう!