L3F.WIN

Github及Hexo的使用

0%

学习stylus【8】条件式

发表于 更新于 分类于

条件式

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

if / else if / else

跟一般的语言一致，if表达式满足(true)的时候执行后面语句块，否则，继续后面的else if或else.
下面这个例子，根据overload的条件，决定是使用padding还是margin.

1
2
3
4
5
6
7
8
overload-padding = true

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

body
  padding 5px 10px

其他例子：

1
2
3
4
5
6
7
box(x, y, margin = false)
  padding y x
  if margin
    margin y x

body
  box(5px, 10px, true)

其他条件工具 box()：

1
2
3
4
5
box(x, y, margin-only = false)
  if margin-only
    margin y x
  else
    padding y x

unless

熟悉Ruby程序语言的用户应该都知道unless条件，其基本上与if相反，本质上是(!(expr)).
下面这个例子中，如果disable-padding-override是undefined或false, padding将被干掉，显示margin代替之。但是，如果是true, padding将会如期继续输出padding 5px 10px.

1
2
3
4
5
6
7
8
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支持后缀条件，这就意味着if和unless可以当作操作符；当右边表达式为真的时候执行左边的操作对象。
例如，我们定义negative()来执行一些基本的检查。下面我们使用块式条件：

1
2
3
4
5
6
7
negative(n)
  unless n is a 'unit'
    error('无效数值')
  if n < 0
    yes
  else
    no

接下来，我们利用后缀条件让我们的方法简洁。

1
2
3
4
negative(n)
  error('无效数值') unless n is a 'unit'
  return yes if n < 0
  no

当然，我们可以更进一步。如这个n < 0 ? yes : no可以用布尔代替：n < 0.
后缀条件适用于大多数的单行语句。如，@import, @charset, 混合书写等。当然，下面所示的属性也是可以的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
}