家庭菜園Sass最近の家庭菜園(130512)Sassが使いやすいので、ブログのデザインをSassベースのフレームワークであるFoundation4に変えようと思っているのだが、まとまった時間がとれないので、もうちょっと手軽な家庭菜園管理用のグリッドシステムを作って遊んでみた。レスポンシブなグリッドデザインだとwidthを%で指定していくんだけど、それだと高さがうまく指定できなくて困っている。CSSだけでうまく指定できるんだろうか?それともjavascriptで高さと幅を計算する必要があるのかわからん。600px固定で50pxの12グリッドシステムで書いているがSassのforループで1x1から12x12の区画をサクッと作れるので便利。cssだけで書く気にはなれん。ちなみに色はFlat-UIのcolor-swatchを拝借した。130506ゴールデンウィークの最終日は、トマトとナスを定植してきた。除草が面倒なのと、経験上マルチをしたほうがナスの生育がいいので、マルチングも施した。130510雨がふる前にゴーヤを定植。人参は順調な感じだけど、発芽率が悪い。ニンニクは葉が枯れてきたので、去年よりは早めに収穫することになりそう。ジャガイモも花が咲いてた。PythonSassLiveReload(Python)のshellが便利すぎるLiveReload-0.15から使えるようになったshellが便利。HTML書くのにSass(Compass)+Jade+CoffeeScriptという組み合わせを使っているとそれぞれwatchしてコンパイルすることになるので端末を3つ無駄にするが、Livereloadでコマンドを定義するのもちょっと面倒。SassGumby2とFoundation4はどっちがいいのか連休中にちょっとつくりたい自分用ウェブサービスがあるんだけど、twitter-bootstrapもなぁということで他の代替(Flatっぽいやつ)を探してみたらFoundation4(定番?)かGumby2のどちらかかなぁ。ちなみにSass+Compassで使えるものを探しています。zurb-foundationでさくっとインストールできた。必要なコンポーネントをアンコメントして有効にするようになっているので、必要以上に肥大化しなくていいかもと思っている。cloneして使うのかな?gemでインストールできるのかどうかはわからん。これからドキュメントを読む予定。FlymakeSass+Comapss用にEmacsをいじっていった結果、Flymakeによるリアルタイム構文チェックまでたどり着いて快適になった。livereloadを組み合わせるとさらによい。--checkによるコンパイルチェック(エラー検出)scss-lintによるLinting更新を検知してリアルタイムに上のチェック、エラーがあれば該当行が赤く染まる。カーソルを該当行にのせると何がいけないのかがミニバッファに表示されるのでエラーが把握しやすい。ちなみに下のスクリーンショットでは29行目にカーソルを合わせていて、「セレクタは一行に一つづつ書きなさい」とpythonのimportみたいなことを言われている。installこんな感じだったと思う。--checkとscss-lintを実行するスクリプトを用意する。--checkの場合は--traceをつけると偶然にもflymake-cursorの書式に対応するので必要な一行目だけを出力させている。")Emacsscssコマンドをscsscheckersコマンドに変更するためにscss-sass-commandを上書きする。checkerがはしらなくて困るFlymakeでSass+CompassのチェックをおこなうおまけFlask+Sass-bootsrap+Coffeescriptなサイトを作っていて、Python,CoffeeScript,Sass全てに対してFlymakeがサポートしてくれるのでつまんないtypoとかのミスで時間をムダにすることがなくなった。EmacsSassFlymakeでSass+Compassのチェックをおこなうこまるわーとか書いたんだけど、別件でscssのオプション調べてたら--compassっていうcompass用のオプション見つけたので、これを加えればいける。scss-modeのソース調べたらscss-sass-optionsにオプション渡せばいいっぽいので、setqした。Errorでしょっちゅう死ぬので以下の設定は追加しておいたほうがよい。13.03.12インストールは普通にlist-packageで。牌語備忘録を参考にして、rbenvで入れたscssにパスを通しておいた。scssを普通に使っているぶんにはなかなか快適だけど、Compassと一緒に使うと困る。何が困るのか?例えばcompassのblueprintを使いたい場合、importのところでコケる。blueprint/reset.importできてないっていうエラー。--checkでエラーが発生したところで終了するのも困る。全てのエラーを補足するようになっていればいいのにと思ったりもするが。flymakeの意味無いじゃん。compassコマンドのほうに構文チェック用のオプションないかなぁと見てみても、作成されたcssのバリデーターくらいしか用意されていないみたいだ。createした時にファイルを用意してくれるオプションでもいいんだけど。FlaskSassFlaskでCompass+CSS3Pieを使う方法IEでtwitter-bootstrapを使うとラベルの角が丸くなくって残念な感じになるのだけど、CSS3Pieを使うことでborder-radiusbox-shadowが解決する。3つのファイルが導入される。PIE.htcのコンテントタイプをtext/x-componentにしなければならないという問題が残っている。apacheを使っている場合は.htaccessにでも書いておけばいいらしいが、Flaskの場合はデフォルトでapplication/octet-streamで送ってしまうのでどうにかしないといけない。FlaskでPIE.htcのContent-Typeをtext/x-componentにする。Reponseオブジェクトのmimetypeを指定して返すようにする。Designersというスクリーンキャストが良かった全部で2時間超えだが、今日は早起きして暇だったので一気に全部見た。Designerstwitter-bootstrapが要素にクラスを追加してデザインを組んでいくので、HTMLをガシガシいじっていくのに、LESSにほとんど手を加えないのに対して、Compass+SassはHTMLはほとんどいじらず、それぞれの要素にCSSを適用してデザインしていくっていう感じだった。こっちのやりかたが王道なんだろうけど。LiveReload便利。Yeomanとcompassは良い感じに使えるんだろうか?それともappstoreで購入したほうが幸せになれるんだろうか?normalize.cssとcompassのresetの違いを理解しておく。ちなみにbootstrap-sassでresetすると悲しいことになるのでやめておこう。このチュートリアルではBlankworkというグリッドシステムを使っていた。ちなみにレスポンシブ・ウェブデザインには対応していない。対応しているのだとZen-GridsとかSusyがある。sofによるとSusyは歴史があるらしい。SassSass+CompassのチュートリアルSass関連のチュートリアルで、ここ一年の間に更新されたものを探してみた。Sassにはお目当てのものはほとんどなかったなぁ。作りながらSassとCompassの作業を学ぶという内容。ワイヤーフレームを使ってデザインしているので、こっち方面が素人すぎる僕には楽しめる内容だった。hidden;ってなんじゃろかと思ったら[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニックなのね。Sassレスポンシブ・ウェブデザインのためのグリッドシステムを作ってみようっていう内容。Rhythmを実装していく。グリッドシステムは出来合いのを使うことが多いけど、どういう感じで実装されているのかを知っておけば弄りたいときに都合がいいかなと思う。Designersスクリーンキャストだけど、時間がかかりそうなので見てない。週末用にストックしておく。SassCompass以外のSassのフレームワークCompassのリファレンスにひと通り目を通して、Blueprintのグリッドサンプルを試したので、他のフレームワークというか最近のSass界隈の情報も仕入れたくなったのでググった。Lovers日本語の情報はあまりないね。Bourbon酒にちなんだ名前は素敵。Sass.と銘打っているようにmixin詰め合わせた感じで、フレームワーク的にCompassに近い。Neatっていうグリッドフレームワークもあるが、これも働きたくないものは酒を飲めと暗示されているようで素敵感が漂っている。Bourbonどっちがいいの?sofに投稿されそうな質問(で、建設的じゃないという理由で速攻クローズされる)だが。bourbon派の意見としては、bourbonは分かりやすいらしい。実態ファイルが見える。ただのscssファイル。階層構造もおそらく自由にできるはず。ドキュメントが読みやすい。サンプルも付いている。小さいライブラリなので習得にほとんど時間がかからない。確かにドキュメントはbourbonのほうが読みやすかった。Rubyの知識がないとコンパイル時になにやっているのかわからんという指摘もされてた。一方でCompass派の意見としてCompassはBourbonのスーパーセットみたいなもんだからサブセットなんて必要ないじゃん、存在域がわからん(意訳)みたいなのもあった。frameworkだ。newsでも似たような事言われてた(bootstrappyってw)僕だったらbootstrap-sassを使うな。Foundationbootstrapの対抗だったらFoundationのほうが有名な気がするが、最近バージョンが上がってモバイルファーストになったらしいがよくわからん。そもそも、フレームワーク臭がいやだなーってことでbootstapの代わりになるようなものを探し始めたのに、フレームワークの比較に収斂しつつあるなんてダメダメだ。ComparisonとはいえFoundation4は面白そうなのでそのうち触ってみようっと。