条件(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

stylus之条件(Conditionals)相关推荐

关于sass（scss）、less、postcss、stylus等的用法与区别
一. Sass/Scss.Less.stylus是什么? 它们都是css预处理器.css预处理器的概念:CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项 ...
CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
CSS3 之 less、sass、stylus区别
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为"风格样式表(Style Sheet)",它 ...
Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性
文章目录一.混合(Mixins) 1.1 Sass混合 1.2 LESS混合 1.3 Stylus混合二.嵌套(Nesting) 三.继承(Inheritance) 3.1 Sass和Stylus ...
systemtap mysql_SystemTap
它只使用了三种数据类型,整数(integers).字符串(strings)以及关联数组(associative Arrays). 它有完整的控制结构,包括块(blocks).条件(conditiona ...
stylus使用文档总结：内置方法+参数+条件+迭代+导入+继承
一.内置方法返回各种颜色的比重(如red(color)等) 颜色函数是CSS预处里器中内置的颜色函数功能,这些功能可以对颜色值进行处理,例如颜色的变亮.变暗.渐变颜色等处理十分的方便. lighte ...
python多个判断条件_Python基础介绍 | 条件判断Conditionals
先前我们已经学了如何使用Strings和Numbers两个数据类型,还有其他的数据类型,例如列表啊.字典啊,我们先放着不学,但以下的内容多多少少少会涉及. 今天学啥呢?我们来看看条件判断,即Condi ...
CSS预处理框架——Stylus
目录内容介绍一.特征二.选择器(Selectors) 1.缩排 :book: 2.规则集 3.父级引用 4.消除歧义三.变量(Variables) 1.变量 :mag: ...
Stylus中文网Stylus中文文档
Stylus中文文档 & Stylus中文网:https://stylus.zcopy.site Stylus 选择器(Selectors) Stylus 变量(Variables) Styl ...

stylus之条件(Conditionals)

条件(Conditionals)

条件：

if / else if / else

除非(unless)：

后缀条件：

stylus之条件(Conditionals)相关推荐

最新文章

热门文章