Web の UI を設計するときに CSS を、stylus や sass など、どれを使えばいいか、悩んだり、不満を感じることがあると思います。AngularDart ならすべてを超越した答えを導き出すことが可能です（自分の利用してる範囲では）。
Dart で CSS を管理する
stylus や sass などの、CSSプリプロセッサと呼ばれるものは利用しません。私も過去、AngularTS の時は stylus 、AngularDart を触り初めの頃は、sass を使っていました。しかし、これには大きな問題があって、sass のアップデートが、dart sdk のバージョンアップに、追い付かなくて、sass を利用するなら、最新の dart sdk が利用できない、という時期がありました。この問題を解決するために、そのままの CSS を使うしかないと、思いました。
Dart ファイル内で CSS を記述する
dart:html ライブラリには、css を設定するための api が用意されています。それを利用します。
メリット
- CSS ファイルを作らないので、CSS ファイルを作る＆移動などの手間の削減_、ファイルエクスプローラーの視認性が向上。
- dart 内で管理するので、変数や条件分岐などが容易＆それらを実現するための_新たな文法を覚える必要が無い
頑張らないといけないところ
- 自分で、dart:html から、api を探してこないといけない。
- 日本語による参考記事はほぼ皆無。英語記事でも十分ではない。
- 特に、メディアクエリーなど、CSS の中でも特別な記法は、正しいやり方にたどり着くまでが大変。
実際のコード
ポイントは3つ。
- template variable を使う。「 <h1 #el>sample</h1> 」の「#el」の部分）
- @ViewChildを使う。「@ViewChild('el')」で、上記の 「#el」を参照できる。この場合、h1 タグの参照を得ます。
- ngOnInit で CSS の処理を記述する。
MediaQuary の例も載せてみました。
import'dart:html';import'package:angular/angular.dart';@Component(selector:'sample',template:'<h1 #el>sample</h1>',)classSampleimplementsOnInit{@ViewChild('el')HtmlElementel;@overridevoidngOnInit(){if(el!=null){consttextColorA='red';consttextColorB='blue';constbackgroundColor='black';constoverflow='scroll';el.style.color=textColorA;el.style.backgroundColor=backgroundColor;el.style.overflow=overflow;/// MediaQuary ブラウザのサイズが変化したら発火するconstminWidth='800px';constmaxWidth='1600px';finalmediaQueryListMin=window.matchMedia('screen and ( min-width:${minWidth} )');finalmediaQueryListMax=window.matchMedia('screen and ( max-width:${maxWidth} )');mediaQueryListMin.addListener((event){if(mediaQueryListMin.matches){el.style.color=textColorA;print('min fire');}});mediaQueryListMax.addListener((event){if(mediaQueryListMax.matches){el.style.color=textColorB;print('max fire');}});};}}所感
MediaQuary の挙動はクセがあるので、実際は、もう少し複雑な処理を書いたり、ラップして使ってます。
網羅してるわけではないので、CSSファイルで記述しないといけない箇所が、例外的に存在する可能性はあります。web-kit とか書かなきゃいけないところとか。まだ、試したことないので、勝手な憶測ですが。
最後に
AngularDart なら CSS のプリプロセッサ選び及びそれに付随するバージョン管理、記法の習得、などから解放されるということを伝えるための記事でした。
Dart のコードで CSS を記述する参考記事が少ないので、どうやって書いたらいいのか、悩むことが多いので、それが1つ大きなネックではあります。初心者の方には少しハードルが高いかなと思いますが、慣れたらこっちの方が楽です。
以上です。