Stylus 条件 Conditionals

🌙
手机阅读
本文目录结构

条件

条件提供了语言的刘控制,否则就是纯粹的静态语言。提供的条件有导入、混入、函数以及更多。下面的例子纯粹示例,并不是使用建议。

if / else if / else

这没什么好说的,跟一般的语言一致,if表达式满足(true)的时候执行后面语句块,否则,继续后面的else ifelse.

下面这个例子,根据overload的条件,决定是使用padding还是margin.

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()帮手:

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

除非(unless)

熟悉Ruby程序语言的用户应该都知道unless条件,其基本上与if相反,本质上是(!(expr)).

下面这个例子中,如果disable-padding-overrideundefinedfalse, 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

后缀条件

Stylus支持后缀条件,这就意味着ifunless可以当作操作符;当右边表达式为真的时候执行左边的操作对象。

例如,我们定义negative()来执行一些基本的检查。下面我们使用块式条件:

negative(n)
  unless n is a 'unit'
    error('无效数值')
  if n < 0
    yes
  else
    no

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

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

当然,我们可以更进一步。如这个n < 0 ? yes : no可以用布尔代替:n < 0.

后缀条件适用于大多数的单行语句。如,@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

生成为:

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>