友達に進められてstylusをいじってみた


みなさん。stylusをご存知ですか??Node.js製のCSSプリプロセッサです。
Mixinが簡単につくれたり、記述が省略できていろいろと便利です。
インストール方法から順に説明していこうと思います。

インストール方法

sudo npm install stylus -g

Node.jsをインストール済みの方は上の命令をターミナルに打ち込めばstylusがダウンロード出来ると思います。

Stylus記述例

stylusの拡張子はstylらしいです。記述方法は以下の通りです。

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

.button
  padding:10px
  border-radius 5px

border-radius()のように、いろんなプロパティがセットになったMixinというものを定義できます。
よく使う変数のセットをMixinにしておくと、開発がスムーズにすすみそうですね。
セレクタを{}でくくらない所や、セミコロンをつけないところも魅力的ですね。

コンパイル方法

至って簡単です。基本的には、ターミナルを起動し先頭にstylusを書いて、コンパイルしたいファイルを<>でくくって、出力名を決めればコンパイルされます。

stylus <test.styl> test.css

ちなみにSublime TextでもSyntax highlighterがありますよ


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →