コンテンツへスキップ
トップへ戻る
このページについて

条件式

条件式は、静的な言語に制御フローを提供し、条件付きインポート、ミックスイン、関数などを可能にします。以下の例は単なる例であり、推奨されていません 😃

if / else if / else

if条件式は期待通りに動作し、単純に式を受け入れ、trueの場合に次のブロックを評価します。ifと共に、典型的なelse ifelseトークンがあり、フォールバックとして機能します。

以下の例では、paddingプロパティを条件付きでオーバーロードし、marginに置き換えます。

overload-padding = true

if overload-padding
  padding(y, x)
    margin y x

body
  padding 5px 10px
overload-padding = true

if overload-padding
  padding(y, x)
    margin y x

body
  padding 5px 10px

別の例

box(x, y, margin = false)
  padding y x
  if margin
    margin y x

body
  box(5px, 10px, true)
box(x, y, margin = false)
  padding y x
  if margin
    margin y x

body
  box(5px, 10px, true)

別のbox()ヘルパー

box(x, y, margin-only = false)
  if margin-only
    margin y x
  else
    padding y x
box(x, y, margin-only = false)
  if margin-only
    margin y x
  else
    padding y x

unless

Rubyプログラミング言語に精通しているユーザー向けに、unless条件式があります。これは基本的にifの反対、つまりif (!(expr))です。

以下の例では、disable-padding-overrideundefinedまたはfalseの場合、paddingはオーバーライドされ、代わりにmarginが表示されます。しかし、trueの場合は、paddingは期待通りにpadding 5px 10pxを出力し続けます。

disable-padding-override = true

unless disable-padding-override is defined and disable-padding-override
  padding(x, y)
    margin y x

body
  padding 5px 10px
disable-padding-override = true

unless disable-padding-override is defined and disable-padding-override
  padding(x, y)
    margin y x

body
  padding 5px 10px

後置条件式

Stylusは後置条件式をサポートしています。つまり、ifunlessは演算子として機能し、右辺の式が真の場合に左辺のオペランドを評価します。

例として、基本的な型チェックを実行するnegative()を定義しましょう。以下では、ブロックスタイルの条件式を使用します。

negative(n)
  unless n is a 'unit'
    error('invalid number')
  if n < 0
    yes
  else
    no
negative(n)
  unless n is a 'unit'
    error('invalid number')
  if n < 0
    yes
  else
    no

次に、関数を簡潔に保つために後置条件式を使用します。

negative(n)
  error('invalid number') unless n is a 'unit'
  return yes if n < 0
  no
negative(n)
  error('invalid number') unless n is a 'unit'
  return yes if n < 0
  no

もちろん、これをさらに進めることができます。例えば、n < 0 ? yes : noと書くことも、単純にブール値n < 0を使用することもできます。

後置条件式は、ほとんどの1行のステートメントに適用できます。例えば、@import@charset、ミックスイン、そしてもちろん、以下に示すようにプロパティにも適用できます。

pad(types = margin padding, n = 5px)
  padding unit(n, px) if padding in types
  margin unit(n, px) if margin in types

body
  pad()

body
  pad(margin)

body
  apply-mixins = true
  pad(padding, 10) if apply-mixins
pad(types = margin padding, n = 5px)
  padding unit(n, px) if padding in types
  margin unit(n, px) if margin in types

body
  pad()

body
  pad(margin)

body
  apply-mixins = true
  pad(padding, 10) if apply-mixins

結果

body {
  padding: 5px;
  margin: 5px;
}
body {
  margin: 5px;
}
body {
  padding: 10px;
}
body {
  padding: 5px;
  margin: 5px;
}
body {
  margin: 5px;
}
body {
  padding: 10px;
}