CSS Nite LP26「CSS Preprocessor Shootout」フォローアップ（4）『Stylusが目指す“CSSプリプロセッサ”』佐藤 歩さん

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、佐藤 歩さん（サイバーエージェント） の『Stylusが目指す“CSSプリプロセッサ”』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

「Stylusが目指すCSSプリプロセッサ」を紹介させていただいた、さとう歩（@ahomu）です。当日はご清聴いただきありがとうございました。

CSSプリプロセッサ3連チャンの最後ということで、Stylus自体に加えてプリプロセッサとCSSの関わりの概念的な領域も紹介してみました。

コミュニティによる支持においては、やはりSassが有力なように感じますが、どのCSSプリプロセッサを利用するとしても、今回ご紹介したプリプロセッサとCSSの問題にちゃんと向き合うことはマストだと思います。ご参考になれば幸いです。 　 以下、実行環境や、機能文法などについて改めてフォローします。 　

実行環境

• LiveReload
• CodeKit

黒い画面のプレッシャーが全体通して強いイベントではありましたが、「まず始める」という意味では、ツール系セッションで紹介されていたGUIのソフトウェアがおすすめです。

自身は Grunt http://gruntjs.com/ というコマンドラインツールで、他のビルドプロセスと統合して自動化し、プロジェクト内でもpackage.jsonをベースに環境を共有しています。

機能・構文

• Stylus
• Try Stylus

公式のドキュメントや、セッション中でも紹介したTry Stylusのサンプルコードをみてもらうのが一番確実です（コードサンプルとして簡単に読めます）

• enja-oss/stylus ? GitHub

私も参加しているenja-ossという翻訳コミュニティで、Stylusのドキュメント和訳が進んでいるため、こちらをチェックして頂くのも良いと思います。（始まったばかりですが、じきに内容が充実してくるはずです）

透過的mixinと柔軟性

　 透過的なmixinが、機能の利用を明示しないという点が逆にどうなのよ、ちゃんと区別できたほうがいいんじゃな？というご意見もあったようです。私も明示的なインターフェースは大好きなので、少なからず共感するところです。

そんなときもStylusは柔軟なので、mixinも「border-radius(3px);」のように書ける選択肢があります。ちょっとLESSのmixinに似ている記法です。また、変数の冒頭に書く記号（$）は付けてもよいし、付けなくてもよかったりします。

StylusでCSSから最も距離を取ったSyntaxを選ぶと、（明示的mixin・プレフィックスつき変数・CSS文法の記号を省略）以下のようになります。

　border-radius(n)
  　-webkit-border-radius n
  　-moz-border-radius n
  　border-radius n
　
　$radius-length = 5px
　
　form input[type=button]
  　border-radius($radius-length)

このあたりも好みに合わせて、「ちょうどよく」なれるStylusであることを、頭の片隅に留めていただければ幸いです。

CSSファイルのimportはできる？

こちら、アンケートで頂いた質問ですが、できます！.cssも.stylも@importで読み込んで、コンパイル時には1ファイルに結合されるようにできます。