フロントエンドエンジニアと名乗って早数年。阿部です。
最近はエディタの機能も充実してきて、ある程度のことは手になじんだエディタでやっちゃうのですが、
単機能だけどエッジの効いたwebサービスのいくつかは
なくてはならないものになっています。
今日はweb屋の僕がよく使っているものをご紹介。
Sassで色を管理したい！けどlightenとかdarken試すのがアレ！
Sassで装飾するときにメインの色を変数化しておいて、さらに、派生で他の色を変数化させておくこと、よくやります。
$main: #dd2222;
$hover: desaturate($main, 60%);
$text: darken( $main , 35% );
凶悪クライアントの気まぐれでやリニューアルで気分転換のためにメインの色を変更する恐ろしいことになっても1カ所書き換えれば対応出来るので捗るのですが、でもこのlightenとかdarkenとかはいちいちコンパイルして確認してのトライアルエラーが面倒すぎる！
いちいち試さなくても
事前に確認しちゃおうよというサービスで、これが死ぬほど便利。
5%とか3%とか、自分のすきな刻みで一覧をガガガっと作ってくれるので、あとはそれっぽい色を指定するだけ。
便利。
Sassでコーディングするけど、クラスとか拾うのが面倒すぎてアレ！
htmlを塊で放り込むと、
クラスやらIDやらを拾い出して、CSSを書けるところまで持って行ってくれる「
OneClickCSS」が便利です。
コーディングの順番は人それぞれだとは思うのですが、自分の場合は、htmlざざっと組んで「
OneClickCSS」通して、scssでクラスを拾って、ババッとCSS書いて確認の流れが捗ります。
ごちゃっと書き込まれたhtmlでも必要なクラスだけつかんでくれて、しかも、仮に不要なクラスが混ざっていても、scssならコンパイルするとプロパティー書かなかったクラスは無視されるので、いろいろ気にせずガッと出来ちゃうところが性格的に合ってます。
はかどる。
追記や修正でコンパイルさせられない！ベンダープレフィックスも自力で書く、ことに、、、面倒！
考えただけでも恐ろしいですが、もう既に書かれているCSSや好き勝手コンパイルしてタスクランナーにかけられないCSS、あるんですよ、そういうのも。
とはいえ、CSS3を使いたいならベンダープレフィックスはちゃんと付けないとね、
元になるcssはSassで書きたい！ならば
とりあえずこういうの使っておけば
ブラウザだけでSassで書いてベンダープレフィックス付けるとこまでは持っていけます。
いや、やろうと思えばプロパティーの順番入れ替えて、minifyしてってとこまでブラウザいけるるでしょうけど、その辺はタスクランナー通した方が思い通りに仕上がるし、それが出来ない場合は、プレフィックス付けるとこまでで大抵大丈夫なので、割愛。
個人的にCSSはSass（プリプロセッサー）で書いて、Gulpやらでコンパイルとポストプロセッサー的な整形やらプレフィックス付け、クロスブラウザ対応させるのが安全で美しいと思ってますが、環境や手順によってはそうもいかないときもあります。
おまけ
3選って言ってるのにおまけつけます。
ダミー画像をサクッと作成
URLでざっくり呼ぶだけでダミー画像を引っ張ってきてくれるので、捗る。
コードスニペットをまとめて管理
Gitのスニペット管理。愛用のbracketsからも呼べるようになって、捗りマックス。
FezVrasta/gist-manager
CSSってカンタン故にちゃんと書くの大変だよね
webデザイナやらフロントエンドエンジニアやら、そういうの名乗る前からCSS書いてるのに、結局詰まるのはCSSなんですよねー。
CSS以外にも調べたり探したりする時間をちょっとずつ削ってくれるwebサービス群をブックマークしておくだけで、早く仕事を終わらせて、早くお家に帰ることが出来て捗ります。
web触りだした頃にダミー画像のジェネレーターとかあったらほんとに捗ったろうなぁ。ダミーとかいちいち打って画像作るって、アレ完全にリソースの無駄ですからね！ほんとに。
他にもこういうのが便利だぞ！ってのがあればどしどし教えてもらえると、これまた捗ります！
それでは、また。
