stylus之条件(Conditionals)

条件(Conditionals)

条件:

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

if / else if / else

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

下面这个例子,根据overload的条件,决定是使用padding还是margin
这里写图片描述
如果”overload-padding”为true的情况,则padding将显示而margin将被干掉。反之则padding将被干掉,而margin将被显示

另外的例子
这里写图片描述
根据传入的第三个参数为true或者false,来决定是否设置body的margin

另外的box()帮手
这里写图片描述

除非(unless):

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

下面这个例子中,如果disable-padding-override是undefined或false, padding将被干掉,显示margin代替之。但是,如果是true, padding将会如期继续输出padding 5px 10px
这里写图片描述

后缀条件:

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

例如,我们定义negative()来执行一些基本的检查。下面我们使用块式条件
这里写图片描述

接下来,我们利用后缀条件让我们的方法简洁
这里写图片描述
当右边的表达式判断n是一个”unit”或小于0的时候才返回左边的”error”或”yes”或”no”

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

后缀条件适用于大多数的单行语句。如,@import, @charset, 混合书写等。当然,下面所示的属性也是可以的
这里写图片描述

生成为
这里写图片描述
先设置body中的margin为默认的5px,然后再设置body的padding为传入的10px

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值