stylus之变量(Variables)

来源:互联网 发布:网络b类违规是什么意思 编辑:程序博客网 时间:2024/06/05 14:41

变量(Variables):

变量:

我们可以指定表达式为变量,然后在我们的样式中贯穿使用
这里写图片描述

编译为
这里写图片描述

变量甚至可以组成一个表达式列表
这里写图片描述

标识符(变量名,函数等),也可能包括$字符
这里写图片描述

属性查找:

Stylus有另外一个很酷的独特功能,不需要分配值给变量就可以定义引用属性。下面是个很好的例子,元素水平垂直居中对齐(典型的方法是使用百分比和margin负值)
这里写图片描述

我们不使用这里的变量w和h, 而是简单地前置@字符在属性名前来访问该属性名对应的值
这里写图片描述

另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中,我们默认指定z-index值为1,但是,只有在z-index之前未指定的时候才这样
这里写图片描述
这里”logo”因为已经设置了z-index属性,所以通过unless关键字确定最后的z-index的值是20,但是”logo2”因为没有定义z-index的属性,所以最终的值是1

属性会“向上冒泡”查找堆栈直到被发现,或者返回null(如果属性搞不定)。下面这个例子,@color被弄成了blue
这里写图片描述

原创粉丝点击