Sass / Drkcore

最近の家庭菜園(130512)

Sun, 12 May 2013 09:51:06 +0919

Sassが使いやすいので、ブログのデザインをSassベースのフレームワークであるFoundation4に変えようと思っているのだが、まとまった時間がとれないので、もうちょっと手軽な家庭菜園管理用のグリッドシステムを作って遊んでみた。

レスポンシブなグリッドデザインだとwidthを%で指定していくんだけど、それだと高さがうまく指定できなくて困っている。CSSだけでうまく指定できるんだろうか？それともjavascriptで高さと幅を計算する必要があるのかわからん。

とりあえず600px x 600px固定で50pxの12グリッドシステムで書いているがSassのforループで1x1から12x12の区画をサクッと作れるので便利。正直cssだけで書く気にはなれん。ちなみに色はFlat-UIのcolor-swatchを拝借した。

130506

ゴールデンウィークの最終日は、トマトとナスを定植してきた。除草が面倒なのと、経験上マルチをしたほうがナスの生育がいいので、マルチングも施した。

130510

雨がふる前にゴーヤを定植。人参は順調な感じだけど、発芽率が悪い。

ニンニクは葉が枯れてきたので、去年よりは早めに収穫することになりそう。ジャガイモも花が咲いてた。

LiveReload(Python)のshellが便利すぎる

Wed, 08 May 2013 05:33:03 +0919

LiveReload-0.15から使えるようになったshellが便利。

例えばHTML書くのにSass(Compass)+Jade+CoffeeScriptという組み合わせを使っているとそれぞれwatchしてコンパイルすることになるので端末を3つ無駄にするが、Livereloadでコマンドを定義するのもちょっと面倒。

そんな時にはshellを使うといい

#!/usr/bin/env python

from livereload.task import Task
from livereload.compiler import shell

Task.add('sass/*.scss', shell('compass compile'))
Task.add('index.jade', shell('jade index.jade'))

と書くだけでOK

Gumby2とFoundation4はどっちがいいのか

Thu, 02 May 2013 19:01:59 +0919

連休中にちょっとつくりたい自分用ウェブサービスがあるんだけど、twitter-bootstrapもなぁということで他の代替（Flatっぽいやつ）を探してみたらFoundation4(定番？)かGumby2のどちらかかなぁ。

ちなみにSass+Compassで使えるものを探しています。

Foundation4

gem install zurb-foundationでさくっとインストールできた。必要なコンポーネントをアンコメントして有効にするようになっているので、必要以上に肥大化しなくていいかもと思っている。

Gumby2

git cloneして使うのかな？gemでインストールできるのかどうかはわからん。

これからドキュメントを読む予定。

Sass x SyntaxCheck x Linting = Emacs & Flymake

Fri, 15 Mar 2013 19:51:32 +0919

Sass+Comapss用にEmacsをいじっていった結果、Flymakeによるリアルタイム構文チェックまでたどり着いて快適になった。livereloadを組み合わせるとさらによい。

scss --checkによるコンパイルチェック(エラー検出)
scss-lintによるLinting

更新を検知してリアルタイムに上のチェック、エラーがあれば該当行が赤く染まる。カーソルを該当行にのせると何がいけないのかがミニバッファに表示されるのでエラーが把握しやすい。

ちなみに下のスクリーンショットでは29行目にカーソルを合わせていて、「セレクタは一行に一つづつ書きなさい」とpythonのimportみたいなことを言われている。

install

こんな感じだったと思う。

gem install sass
gem install compass
gem install scss-lint

scsscheckers

scss --checkとscss-lintを実行するスクリプトを用意する。ついでにflymake-cursorに対応させるために出力をいじるが、scss --checkの場合は--traceをつけると偶然にもflymake-cursorの書式に対応するので必要な一行目だけを出力させている。

#!/usr/bin/env python

from subprocess import Popen, PIPE
import sys

for arg in sys.argv[1:]:
    if arg.endswith(".scss"):
        file = arg

p1 = Popen(["scss", "--compass", "--trace", "--check", file],
           stdin=PIPE, stdout=PIPE, stderr=PIPE)

stdout, stderr = p1.communicate()
print  stderr.split("\n")[0]

p2 = Popen(["scss-lint", file],
           stdin=PIPE, stdout=PIPE, stderr=PIPE)

stdout, stderr = p2.communicate()
print stdout.replace(" - ", ": ")

Emacs

scssコマンドをscsscheckersコマンドに変更するためにscss-sass-commandを上書きする。

;;; http://d.hatena.ne.jp/CortYuming/20120110/p1#20120110f1
(defun my-css-electric-pair-brace ()
  (interactive)
  (insert "{")(newline-and-indent)
  (newline-and-indent)
  (insert "}")
  (indent-for-tab-command)
  (previous-line)(indent-for-tab-command)
  )

(defun my-semicolon-ret ()
  (interactive)
  (insert ";")
  (newline-and-indent))

(add-to-list 'auto-mode-alist '("\\.\\(scss\\|css\\)\\'" . scss-mode))
(add-hook 'scss-mode-hook 'ac-css-mode-setup)
(add-hook 'scss-mode-hook
          (lambda ()
            (define-key scss-mode-map "\M-{" 'my-css-electric-pair-brace)
            (define-key scss-mode-map ";" 'my-semicolon-ret)
            (setq css-indent-offset 2)
            (setq scss-sass-command "~/bin/scsscheckers")
            (setq scss-compile-at-save nil)
            ))

(load-library "flymake-cursor")

補足

ここ二週間くらい試したこと

おまけ

Flask+Sass-bootsrap+Coffeescriptなサイトを作っていて、Python,CoffeeScript,Sass全てに対してFlymakeがサポートしてくれるのでつまんないtypoとかのミスで時間をムダにすることがなくなった。

これを機会にWebデザイナー系のヒトもEmacsに入門すると楽しいと思いますよ！

Emacs実践入門　～思考を直感的にコード化し、開発を加速する (WEB+DB PRESS plus)
大竹智也
技術評論社 / 2604円 ( 2012-03-07 )

FlymakeでSass+Compassのチェックをおこなう

Tue, 12 Mar 2013 20:10:01 +0919

こまるわーとか書いたんだけど、別件でscssのオプション調べてたら--compassっていうcompass用のオプション見つけたので、これを加えればいける。

scss-modeのソース調べたらscss-sass-optionsにオプション渡せばいいっぽいので、setqした。

(add-hook 'scss-mode-hook
          (lambda ()
            (define-key scss-mode-map "\M-{" 'my-css-electric-pair-brace)
            (define-key scss-mode-map ";" 'my-semicolon-ret)
            (setq css-indent-offset 2)
            (setq scss-sass-options '("--compass"))
            (setq scss-compile-at-save nil)
            (flymake-mode t)
            ))

あとはConfigulation Errorでしょっちゅう死ぬので以下の設定は追加しておいたほうがよい。

(defadvice flymake-post-syntax-check (before flymake-force-check-was-interrupted)
  (setq flymake-check-was-interrupted t))
(ad-activate 'flymake-post-syntax-check)

参考

CompassとFlymakeを一緒に使うとSyntax checkerがはしらなくて困る

Sun, 10 Mar 2013 11:28:04 +0919

Emacsでscss-modeを使う

解決した 13.03.12

インストールは普通にlist-packageで。

設定はscss-mode設定 / 牌語備忘録を参考にして、rbenvで入れたscssにパスを通しておいた。

scssを普通に使っているぶんにはなかなか快適だけど、Compassと一緒に使うと困る。

何が困るのか？

例えばcompassのblueprintを使いたい場合、importのところでコケる。

自分でscss叩いてみると

$ scss --check sass/screen.scss
Syntax error: File to import not found or unreadable: blueprint/reset.

importできてないっていうエラー。まぁcompassで挿入されるから実体がないのはしょうがないけど、scss --checkでエラーが発生したところで終了するのも困る。全てのエラーを補足するようになっていればいいのにと思ったりもするが。flymakeの意味無いじゃん。

compassコマンドのほうに構文チェック用のオプションないかなぁと見てみても、作成されたcssのバリデーターくらいしか用意されていないみたいだ。createした時にファイルを用意してくれるオプションでもいいんだけど。

というわけで、他のCompass使いの人達はどうやって構文チェックしているんだろうか？

検索かけてもほとんどヒットしないんだよなぁ

FlaskでCompass+CSS3Pieを使う方法

Sun, 10 Mar 2013 07:18:17 +0919

IEでtwitter-bootstrapを使うとラベルの角が丸くなくって残念な感じになるのだけど、CSS3Pieを使うことで

border-radius
box-shadow

が解決する。

bootstrap-sassと一緒に使う

インストール

$ compass create bstrap -r bootstrap-sass --using bootstrap
$ cd bstrap
$ compass install compass/pie

これで stylesheets/PIE.htc, sass/pie.scss, stylesheets/pie.css の3つのファイルが導入される。

PIE.htcのコンテントタイプをtext/x-componentにしなければならないという問題が残っている。apacheを使っている場合は.htaccessにでも書いておけばいいらしいが、Flaskの場合はデフォルトでapplication/octet-streamで送ってしまうのでどうにかしないといけない。

FlaskでPIE.htcのContent-Typeをtext/x-componentにする。

Reponseオブジェクトのmimetypeを指定して返すようにする。

@app.route("/PIE.htc")
def pie_htc():
  handle = open("static/bstrap/stylesheets/PIE.htc", 'r+')
  return Response(handle, mimetype='text/x-component')

使う

pieをincludeする

.test-box {
  @include pie;
  @include border-radius(3px);
}

SASS and Compass for Web Designersというスクリーンキャストが良かった

Sat, 09 Mar 2013 17:50:16 +0919

全部で2時間超えだが、今日は早起きして暇だったので一気に全部見た。

SASS and Compass for Web Designers

twitter-bootstrapが要素にクラスを追加してデザインを組んでいくので、HTMLをガシガシいじっていくのに、LESSにほとんど手を加えないのに対して、

Compass+SassはHTMLはほとんどいじらず、それぞれの要素にCSSを適用してデザインしていくっていう感じだった。まぁこっちのやりかたが王道なんだろうけど。

LiveReload便利。Yeomanとcompassは良い感じに使えるんだろうか？それともappstoreで購入したほうが幸せになれるんだろうか？
normalize.cssとcompassのresetの違いを理解しておく。ちなみにbootstrap-sassでresetすると悲しいことになるのでやめておこう。
このチュートリアルではBlankworkというグリッドシステムを使っていた。ちなみにレスポンシブ・ウェブデザインには対応していない。対応しているのだとZen-GridsとかSusyがある。sofによるとSusyは歴史があるらしい。

Compassで便利だなと思ったもの

hide-textはtext-indentでとばしていた

Sass+Compassのチュートリアル

Wed, 06 Mar 2013 19:18:47 +0919

Sass関連のチュートリアルで、ここ一年の間に更新されたものを探してみた。

35 Great Resources for Compass and Sass

にはお目当てのものはほとんどなかったなぁ。

Sass Tutorial: Building An Online VCard With Sass & Compass

タイトルの通り、VCard を作りながらSassとCompassの作業を学ぶという内容。ワイヤーフレームを使ってデザインしているので、こっち方面が素人すぎる僕には楽しめる内容だった。

socialsectionのところの

text-indent: 100%;  
whitewhite-space: nowrap;  
overflow: hidden;

ってなんじゃろかと思ったら[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニックなのね。

Improve your responsive design workflow with Sass

レスポンシブ・ウェブデザインのためのグリッドシステムを作ってみようっていう内容。可変グリッドとVertical Rhythmを実装していく。

グリッドシステムは出来合いのを使うことが多いけど、どういう感じで実装されているのかを知っておけば弄りたいときに都合がいいかなと思う。

それからVertical Rhythmはこのサイトがわかりやすかった

SASS and Compass for Web Designers

スクリーンキャストだけど、時間がかかりそうなので見てない。週末用にストックしておく。

Compass以外のSassのフレームワーク

Tue, 05 Mar 2013 20:54:35 +0919

Compassのリファレンスにひと通り目を通して、Blueprintのグリッドサンプルを試したので、他のフレームワークというか最近のSass界隈の情報も仕入れたくなったのでググった。

30 Amazing Resources for Sass Lovers

日本語の情報はあまりないね。

Bourbon

酒にちなんだ名前は素敵。

A simple and lightweight mixin library for Sass.と銘打っているようにmixin詰め合わせた感じで、フレームワーク的にCompassに近い。

Bourbon上に構築されたBourbon Neatっていうグリッドフレームワークもあるが、これも働きたくないものは酒を飲めと暗示されているようで素敵感が漂っている。

Compass と Bourbonどっちがいいの？

sofに投稿されそうな質問（で、建設的じゃないという理由で速攻クローズされる）だが。

bourbon派の意見としては、bourbonは分かりやすいらしい。

実態ファイルが見える。ただのscssファイル。なので階層構造もおそらく自由にできるはず。
ドキュメントが読みやすい。サンプルも付いている。
コンパイルが軽い。
小さいライブラリなので習得にほとんど時間がかからない。

確かにドキュメントはbourbonのほうが読みやすかった。

Rubyの知識がないとコンパイル時になにやっているのかわからんという指摘もされてた。

一方でCompass派の意見として

CompassはBourbonのスーパーセットみたいなもんだからサブセットなんて必要ないじゃん、存在域がわからん(意訳)

みたいなのもあった。

結論は好きな方使え

Centurion

Centurionはresponsive web frameworkだ。Docsをみると、んーbootstrapみたいにでかいフレームワーク目指してんのかなぁと思ったが、Hacker newsでも似たような事言われてた(bootstrappyってw)

僕だったらbootstrap-sassを使うな。

Foundation

bootstrapの対抗だったらFoundationのほうが有名な気がするが、最近バージョンが上がってモバイルファーストになったらしいがよくわからん。

そもそも、フレームワーク臭がいやだなーってことでbootstapの代わりになるようなものを探し始めたのに、フレームワークの比較に収斂しつつあるなんてダメダメだ。

Responsive CSS Framework Comparison

とはいえFoundation4は面白そうなのでそのうち触ってみようっと。

おまけ

検索してたら見つけた

Designing Custom Github Demo Pages