stylus之选择器(Selectors)

时间:2022-03-11 05:38:15

选择器(Selectors):

缩排:

Stylus的空格有重要的意义,我们使用缩排和凹排代替花括号”{“以及”}”
stylus之选择器(Selectors)

上面代码就对应于
stylus之选择器(Selectors)

如果你喜欢,你可以把冒号加上,用做分隔,便于阅读
stylus之选择器(Selectors)

规则集:

Stylus就跟CSS一样,允许你使用逗号为多个选择器同时定义属性
stylus之选择器(Selectors)

使用新行是一样的效果
stylus之选择器(Selectors)

等同于
stylus之选择器(Selectors)

父级引用:

字符”&”会指向当前样式所在的大括号外的标签

下面这个例子,我们两个选择器(textarea和input)在:hover伪类选择器上都改变了color值
stylus之选择器(Selectors)

等同于
stylus之选择器(Selectors)

stylus之选择器(Selectors)
等价于
stylus之选择器(Selectors)

下面这个例子,IE浏览器利用了父级引用以及混合书写来实现2px的边框
stylus之选择器(Selectors)

其变身后面目
stylus之选择器(Selectors)

“&”符号会找到”box-shadow”的作用对象,也就是”#login”,给它添加”border”的样式

消除歧义:

类似padding - n的表达式可能既被解释成减法运算,也可能被释义成一元负号属性。为了避免这种歧义,用括号包裹表达式
stylus之选择器(Selectors)

编译为
stylus之选择器(Selectors)

然而,只有在函数中才会这样(因为函数同时用返回值扮演混合或回调)。
例如,下面这个就是OK的(产生与上面相同的结果)
stylus之选择器(Selectors)