stylus_基礎構文(条件/ループ/@import/@media/@extend)

stylusとless sassは同じことをしていて、変数、計算の考えなど、共通のところがたくさんあります.
stylusの基礎知識をまとめる
条件
条件があってこそ、制御されるので、動的言語と言える.

if/else if/else

unless(を除く)

styl

box(x,y,margin-only = false)
    if margin-only
        margin x y
    else 
        padding x y
p
    box(5px, 10px, true)

コンパイル後のcss

p {
  margin: 5px 10px;
}

ループ反復
ループして値を取ることもできるし、ループして値を割り当てることもできる.文法for[,]in
styl

p
    for bbbb in 2 3 4 5 6 7
        foo bbbb
    for a ,i in 

コンパイル後のcss

p {
  foo: 2;
  foo: 3;
  foo: 4;
  foo: 5;
  foo: 6;
  foo: 7;
}

@import
他のstylusスタイルのインポートをサポートします.
@media
@mediaの動作原理は通常のCSSと同じですが、Stylusのブロック記号を使用します.
styl

@media print
  #header
  #footer
    display none

css

@media print {
  #header,
  #footer {
    display: none;
  }
}

@extend
継承
styl

.msg
    padding 10px 
    margin 10px
    border 1px solid #ccc
.warning
    @extend .msg
    color red

css

.msg,
.warning {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
}
.warning {
  color: #f00;
}