- Stylus 概述
- 选择器(Selectors)
- 变量(Variables)
- 插值(Interpolation)
- 运算符(Operators)
- 混合书写(Mixins)
- 方法(Functions)
- 关键字参数(Keyword Arguments)
- 内置方法(Built-in Functions)
- 其余参数(Rest Params)
- 注释(Comments)
- 条件(Conditionals)
- 迭代(Iteration)
- 导入(@import)
- 媒体(@media)
- 自定义字体(@font-face)
- 关键帧(@keyframes)
- 继承(@extend)
- 函数之url()
- CSS字面量(CSS Literal)
- CSS样式解析(CSS Style Syntax)
- 字符转码(Char Escaping)
- 可执行性(Executable)
- 错误报告(Error Reporting)
- 连接中间件(Connect Middleware)
- 自检API(Introspection API)
- JavaScript API
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
条件(Conditionals)
条件
条件提供了语言的刘控制,否则就是纯粹的静态语言。提供的条件有导入、混入、函数以及更多。下面的例子纯粹示例,并不是使用建议。
if / else if / else
这没什么好说的,跟一般的语言一致,if
表达式满足(true
)的时候执行后面语句块,否则,继续后面的else if
或else
.
下面这个例子,根据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-override
是undefined
或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
后缀条件
Stylus支持后缀条件,这就意味着if
和unless
可以当作操作符;当右边表达式为真的时候执行左边的操作对象。
例如,我们定义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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论