Help us understand the problem. What is going on with this article?

stylus napespace? and basic layout from dotinstall

More than 5 years have passed since last update.

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

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

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

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

ハッシュリテラル、関数

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

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

runtBlue
働きたい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした