条件句 #

¥Conditionals

条件为静态语言提供了控制流，提供条件导入、混合、函数等。下面的例子只是简单的例子，不推荐:)

¥Conditionals provide control flow to a language which is otherwise static, providing conditional imports, mixins, functions, and more. The examples below are simply examples, and not recommended 😃

if / else if / else #

if 条件如你所期望的那样工作，只需接受一个表达式，并在 true 时评估以下块。除了 if 之外，还有典型的 else if 和 else 令牌，充当后备令牌。

¥The if conditional works as you would expect, simply accepting an expression, evaluating the following block when true. Along with if are the typical else if and else tokens, acting as fallbacks.

下面的示例将有条件地重载 padding 属性，将其交换为 margin。

¥The example below would conditionally overload the padding property, swapping it for 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

另一个例子：

¥Another example:

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() 助手：

¥Another box() helper:

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))。

¥For users familiar with the Ruby programming language, we have the unless conditional. It’s basically the opposite of if—essentially if (!(expr)).

在下面的示例中，如果 disable-padding-override 是 undefined 或 false，则 padding 将被覆盖，而显示 margin。但如果是 true，padding 就会按照预期继续输出 padding 5px 10px。

¥In the example below, if disable-padding-override is undefined or false, padding will be overridden, displaying margin instead. But if it’s true, padding will continue outputting padding 5px 10px as expected.

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

后缀条件句 #

¥Postfix Conditionals

Stylus 支持后缀条件。这意味着 if 和 unless 充当运算符；当右侧表达式为真时，它们评估左侧操作数。

¥Stylus supports postfix conditionals. This means that if and unless act as operators; they evaluate the left-hand operand when the right-hand expression is truthy.

例如，让我们定义 negative() 来执行一些基本类型检查。下面我们使用块式条件语句：

¥For example let's define negative() to perform some basic type checking. Below we use block-style conditionals:

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

接下来，我们利用后缀条件来保持函数简洁。

¥Next, we utilize postfix conditionals to keep our function terse.

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。

¥Of course, we could take this further. For example, we could write n < 0 ? yes : no, or simply stick with booleans: n < 0.

后缀条件可以应用于大多数单行语句。例如，@import、@charset、mixin - 当然还有如下所示的属性：

¥Postfix conditionals may be applied to most single-line statements. For example, @import, @charset, mixins—and of course, properties as shown below:

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

产量：

¥yielding:

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

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