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

130112_0503.jpg

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

メッセージ、補足

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

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

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

実行環境

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

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

機能・構文

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

私も参加している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ファイルに結合されるようにできます。

Shift10:Webデザイン行く年来る年(CSS Nite LP49)

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」

3月に都内で好評のうちに終了したCSS Nite LP51「Reboot Dreamweaver」の大阪版を5月13日に開催します。