nikki.: 2月 2011

つくば

つくばで建築をみてきました。

都内からつくばまでは1時間半ほどかかります。
つくばエクスプレスのおかげで、きっと短くなりました。

つくば東小学校。藤本昌也設計。ひらべったくのびた小学校。天井もひくく、懐かしい雰囲気。
コンクリートと木目のバランスがかわいらしい。
三角屋根だから、つくばは雪がふるのかなと思いましたがふっても積もらないらしい。

セキショウつくばアネックス。栗生明設計。
奇抜で突拍子がない。
こういうの見るとわくわくするネ！この面は
ただの壁のようで、本体からつながっているんだけど、
ほんとこの建物ってこれだけ。別にかっこよいとかじゃない。（裏側しょぼい）
でもインパクトすごいし楽しいです。

エポカルつくば。
格子のようなデザインの、キラキラしたガラス壁。
中から見ると光がガラスで屈折してはいり、おだやかにきれい。

つくばカピオ。谷口吉生設計。
MoMAや猪弦美術館、上野の宝物館に似たファザード。
圧倒的にかっこうよく、美しい。
キューブをミニマルに終えず、あざとく昇華するこの方の建築は
どれもすばらしくてだいすき。
ファザードを遠目に見たときにだって、その景観も含めてかっこいいですよね。

駐車場。伊藤豊雄設計。
奇抜なデザインがらしくてかっこいい。
構造がもろそう、というか破綻してないの？これ？みたいな雰囲気。
駐車場ってコンクリで、がっちがちで、みたいな観念をぐるりと反転させられる建築。
確信犯なルーパーのならびが美しい。

つくばは都心からちかくて小旅行気分味わえるのでよいです。
磯崎新は無骨でぶさいくにしか見えない... 素人ってさみしい。

つづきです。
つづくというのは素晴らしいことだ、だが
ジャンプのように人気漫画がぐだぐだと続くのを私は支援できないし、
tusimarimoは富樫を応援します。お願い続き書いて！！！！

sassだけ使おう
ところでsassだけ使うってアリっぽいです。（情報通）
たぶんhaml使うのってrubyじゃないとだめなんでしょ、、
だからcssの管理方法としてsassだけ導入するっていう感じでしょうか。
それで、sassだけ使うときは、sass記法で記述したものをcssへ変換するんだと思う。

-t オプション
出力する時のフォーマットを指定する。

$ sass -t nested sample.sass
h1 {
　color: red; }

$ sass -t compact sample.sass
h1 { color: red; }

$ sass -t compressed sample.sass
h1{color:red}

$ sass -t expanded sample.sass
h1 {
　color: red;
}

--watch オプション
sassファイルを監視して、変更の都度cssへ書きだす。
これはディレクトリを指定すると再帰的に書き出してくれる。

$ sass --watch sample.sass:sample.css
$ sass --watch sass_dir/:css_dir/

--watchオプションというのが出来たからルビー使ってない人にも普及しだしたのかな？
たしかに更新の都度、変換するのはめんどくさすぎるし、これならいいかもですね。

あなたは使いますか？

hamlとsassつづき

2日連続で化粧したら乾燥してガビってる・・
アラサーなめたらいけません、
同僚からもらったSK-Ⅱのパックでもしようかと思います。

ちょっと落ち着いて、いったん記法について覚えましょう。
話はそれからです。

hamlの記法
Doctype
公式ドキュメントで「When the :format option is set to :html4, the following doctypes are supported:」と書いてる、
コレ試したいんですができなかった。
こうして自分の頭の悪さをちょこちょこ確認することで心が折れてゆく。
私の環境ではデフォルトxhtmlにセットされていました。

=====> haml
/ html5
!!! 5

/ XHTML 1.0 Transitional
!!!

=====> html

<!DOCTYPE html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

コメント
上のDoctypeのところでちょろっと書いちゃったんですが、コメントはスラッシュです。
また、hamlにだけコメントしてhtml出力時は表示しないみたいのは-#と書く。

=====> haml
/ sample comment

/
　<div class="sample">
　　<p>I'm very poor!!!!!!!!!!!!!!!!</p>
　</div>

/ comment 01
-# haml comment
/ comment 02

=====> html




/ comment 01
/ comment 02

html要素
%の後に要素を書きまスネ、属性値は{}や()で記述しまスネ。
classやidはドットとかシャープで書いてもいいみたいでス！

=====> haml
%div
　%p sample text

%div{:class => "sampleClass"}
　%a(title="sample title" href="http://sample.com/") sample

%div.sampleClass
　%p#sampleId sample

=====> html
<div>
　<p>sample text</p>
</div>

<div class="sampleClass">
　<a title="sample title" href="http://sample.com/"<sample</a>
</div>

<div class="sampleClass">
　<p id="sampleId">sample</p>
</div>

評価・計算結果の代入
評価や計算結果の代入は=で行いますが、この=は別になんでもないようなテキストの代入にも使える。

=====> haml
/ 文字列連結
%p.sample01
　= ["I", "am", "very", "poor"].join ""

- marimo = "I am"
- marimo << " very"
- marimo << " poor"
%p.sample02= marimo

/ エスケープ
%p
　&= "I am very poor & very poor"

=====> html

<p class="sample01">I am very poor</p>

<p class="sample02">I am very poor</p>


<p>I am very poor & very poor</p>

他にも公式見るといろいろあるんだけど、なんか使えなかったりする。
使えないっていうのは言い訳で、使い方わかんないっていう感じなんだよねー！！！

sassの記法
基本
基本的な記法です、括弧とセミコロンがなくなっていてきれいですね！
ネストしたらセレクタであれば子要素扱い・プロパティもいい感じに展開なりますし、
&をつかうと親のセレクタを展開してくれます。

=====> sass
selector
　property: value
　font:
　　family: serif
　　weight: bold

　selector
　　property: value

　&:hover
　　property: value

=====> css
selector {
　property: value;
　font-family: serif;
　font-weight: bold;
}
selector selector {
　property: value;
}
selector:hover {
　property: value;
}

変数・演算もできる
変数が使えるのでいちいちgrepとかしなくていいですよ！
しかもその変数を演算したりできるのでなにかに使えるといいですね。

=====> sass
$sample: 10px
selector
　padding: $sample / 2
　margin: $sample / 2

=====> css
selector {
　padding: 5px;
　margin: 5px;
}

関数を利用する
デフォルトの関数がたくさんあって、それを使うこともできる。
sassの関数一覧ページを見るとたくさんある。
・数値取り扱い系

=====> sass
selector
　# 絶対値を取得
　margin: abs(10px) abs(-5px)

　# 繰り上げ
　padding: ciel(9.3px)

　# 繰り下げ
　border: floor(1.6px) solid

　# 四捨五入
　height: round(100.4px)
　width: round(99.8px)

=====> css
selector {
　margin: 10px 5px;
　padding: 10px;
　border: 1px solid;
　height: 100px;
　width: 100px;
}

・色を変える

=====> sass
$sample: #800
selector
　# 暗くする
　background-color: darken($sample, 20%)

　# 明るくする
　color: lighten($sample, 20%)

=====> css
selector {
　background-color: #200;
　color: #e00;
}

セレクタごとのセットとかをまとめて変数にもてる
自分で関数みたいのつくれるって感じです。
変数わたしたりもできる。

=====> sass
@mixin sample($sample)
　property: $sample

@mixin base
　selector
　　property: value

#data
　@include sample(10px)
　@include base

=====> css
#data {
　property: 10px;
}
#data selector {
　property: value
}

継承
継承ができそうです。

=====> sass
selector01
　property: value

selector01.sample
　property: value

selector02
　@extend selector01
　property: value

====> css
selector01,
selector02 {
　property: value
}
selector01.sample,
selector02.sample {
　property: value
}
selector02 {
　property: value
}

mixinとextendの違いが、というかそれ自体がいまいちぱっとしない、
どうやって使いわけようかと考えました。

extendのほうって結局、継承とかいってるけどhamlの概念の
「Markup should be DRY」に基づいてて、
つまりは２回も書きたくないための機能？
一方mixinのほうはベースセットみたいにまとめておいたのを
いろんなところで変数の代入値変えて使える。

なのかねえ。
実際ちゃんと使ってみて考えてみましょう。
続くのでしょうか？それはイエスですらわからないのです。

nikki.

2011年2月8日火曜日

つくば

hamlとsassつづき、しかしsassだけ

hamlとsassつづき