stylus napespace? and basic layout from dotinstall


stylus のここがよい
---
* gulp と同じく node で動くので、jade 込みで ノールックで環境が整っちゃう。
* 名前空間が便利
* 関数がある、謎の型を覚えればすいすい使える。

### 型
これがわかんないと、なぜエラーがでるのかわからん。記法が複数あるのもなんとなくわかってくる。

調べ方は、warn()関数を使うか、適当に出力してみてしてみること。


```
  a = typeof("node") // string
  b = typeof(12) // unit
  d = typeof(30px) // unit
  c = typeof(#fff) // rgba
  hhh = {a: 123, b: 31231}
  typeof(hhh) // object
  unit(10) // ''
  unit(15in) // 'in'
  unit(15%, 'px') // 15px
  unit(15%, px) // 15px
```

css ネイティブで使える値を unitって呼んでるらしい
色はだいたい rgba
文字列はそのままだと string
Hash で囲むと object
unit関数は unit 値から値を取り出したり、つなげたりしてる。

### ラベル

記事が少ないのでちょっとだけ stylus 紹介。

```
a = "width"
b = 400px
div
  #{a} 300px
  height b
```

属性指定になり得る一番左や、もじくはセレクタに変数を埋め込む場合は変数展開リテラルが必要のようだ。

リテラルがない場合は、関数として解釈してるようだ。

２番目以降はそのまま書いても適当に型を合わせてくれるが、型によっては入らないので自分で整えておかないといけない。いまのところの解釈ですが。

### ハッシュリテラル、関数

```
Coloring = {}
Coloring = {
  "header": #eee
  "main": {
    "left": #aaa
    "content": #ddd
    "right": #bbb
  }
  "footer": #ccc
}
background-color-id-with-color($hash)
  for id, value in $hash
    if typeof(value) is "rgba"
      #{id}
        background-color value
background-color-id-with-color(Coloring)
background-color-id-with-color(Coloring.main)

```

ハッシュリテラルが使える、入れ子にもできる。ただし、同じリテラルで属性を指定するだけのスコープのようにも使えるためややこしい。

キー値は、json　のように\"\"を省略できるが、上の理由で若干振る舞いが違う。文字列が属性指定として直接使える場合が考慮されているみたい。ハッシュとして使うならクオートしておく。呼び出しは、ドットチェインでいける、これがいいよね js は。

ここで、htmlの div 構造を名前空間に閉じ込めながらcss を考えたりできるので便利。上のは emmet: #container>#header+(#left+#main+#right)+#footer ってわけです。

関数はおもむろに fun() でインデントを作れば、関数になる。呼び出し時とほとんど見分けがつかないがちゃんと動く。無名関数 a = @(args) {} という記法もあるが振る舞いが違ったのでスルー。

今回はハッシュを受けて、background-color にぶっこんでいく関数を用意。rgba型を確認しながらセレクタを変数展開で作って、動的にcss def をしてくれる。

名前空間と関数
---

一応下のコードが通っているので、擬似クラスみたいなことできないかやってみたい。。。そうじゃなくても、便利にしたい。

```
  fnfnfn = @() {
    width: 400px
  }
  typeof(fnfnfn) // function
  my-func()
    div
      height: 400px
  typeof(my-func) // function
  fn-hash = {
    "yahoo": fnfnfn
  }
  typeof(fn-hash) // object
  typeof(fn-hash.yahoo) // function
  sufn-hash = {
    "mero": my-func
  }
  typeof(sufn-hash) // object
  typeof(sufn-hash.mero) // function
  Name = {
    "space": sufn-hash
  }
  typeof(Name.space.mero) // function

```

あれ、かなり使い勝手いいな。試してた時はエラー出まくってたけど、Name.space.mero が通るのはしゅごい。

ベーシックなレイアウト　from dotinstall
---
dotinstall 紹介の基本レイアウト stylus で書き換えてどうなるか実験してみた。

### 1カラム

```
  global-reset()
  Container = {
    "header": red
    "content": blue
    "footer": green
  }
  background-color-id-with-color(Container)
  #container
    margin 0 auto
    padding 0
    width 70%
```

global-reset() は nib より。
さきほど用意した、backgroun-color-id-with-color 関数のためのハッシュ記法が、html を明示してくれているので、考えやすい、素晴らしい。
まさしく emmet: #container>(#header+#content+#footer) の構成での css。
margin 0 auto で センタリングしてくれるってやつ。

### 2カラム可変

```
  Container = {
    "header": a-color()
    "main": {
      "left": a-color()
      "right": a-color()
    }
    "footer": a-color()
  }
  background-color-id-with-color(Container)
  background-color-id-with-color(Container.main)

  #container
    width 70%
  #main
    overflow hidden
  #left
     float left
     width 200px
  #right
     margin-left 200px
```

a-color()は適当な色をもってくる関数、自分定義。
子要素のフロートにも関わらず、子要素が回り込みがおきるのを防ぐのが overflow hidden
margin で左の外側に空白をつくってできあがり。

### 2カラム固定

```

  Container = {
    "header": a-color()
    "main": a-color()
    "left": a-color()
    "right": a-color()
    "footer": a-color()
  }
  background-color-id-with-color(Container)
  #continer
    width 500px
  #main
    overflow hidden
  #left
    float left
    width 200px
  #right
     width 300px
```

### 3カラム可変

```

  Container = {
    "header": a-color()
    "main": a-color()
    "left": a-color()
    "center": a-color()
    "right": a-color()
    "footer": a-color()
  }
  background-color-id-with-color(Container)
  #container
    width 70%
    margin 0 auto
  #main
    overflow hidden
  #left
    float left
    width 100px
  #right
    float right
    width 100px
  #center
    margin-left 100px
    margin-right 100px

```

### 3カラム固定

```

  Container = {
    "header": a-color()
    "main": {
      "left": a-color()
      "center": a-color()
      "right": a-color()
    }
    "footer": a-color()
  }
  background-color-id-with-color(Container)
  background-color-id-with-color(Container.main)
  #container
    margin 0 auto
    width 500px
  #main
    overflow hidden
  #left, #center, #right
    float left
  #left
    width 100px
  #right
    width 100px
  #center
    width 280px
    margin-right 10px
    margin-left 10px
```

色指定を分離するだけで、かなりすっきりしていました。