Stylus 选择器 Selectors

🌙
手机阅读
本文目录结构

缩排(Indentation)

Stylus蛮“玄幻”的(如基于缩进),空格有重要的意义,所以,我们使用缩排和凹排代替花括号{以及}

body
  color white

上面代码就对应于:

body {
  color: #fff;
}

如果你喜欢,你可以把冒号加上,用做分隔,便于阅读:

body
  color: white

规则集

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

textarea, input
  border 1px solid #eee

使用新行是一样的效果:

textarea
input
  border 1px solid #eee

等同于:

textarea,
input {
  border: 1px solid #eee;
}

该规则唯一的例外就是长得像属性的选择器。例如,下面的foo bar baz可能是个属性或者是选择器。

foo bar baz
> input
  border 1px solid

为解决这个原因,我们可以在尾部加个逗号:

foo bar baz,
form input,
> a
  border 1px solid

父级引用

字符&指向父选择器。下面这个例子,我们两个选择器(textareainput)在:hover伪类选择器上都改变了color

textarea
input
  color #A7A7A7
  &:hover
    color #000

等同于:

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

下面这个例子,IE浏览器利用了父级引用以及混合书写来实现2px的边框。

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments
  html.ie8 &,
  html.ie7 &,
  html.ie6 &
    border 2px solid arguments\[length(arguments) - 1\]

body
  #login
    box-shadow 1px 1px 3px #eee

其变身后面目:

body #login {
  -webkit-box-shadow: 1px 1px 3px #eee;
  -moz-box-shadow: 1px 1px 3px #eee;
  box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
  border: 2px solid #eee;
}

消除歧义

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

pad(n)
  padding (- n)

body
  pad(5px)

编译为:

body {
  padding: -5px;
}

然而,只有在函数中才会这样(因为函数同时用返回值扮演混合或回调)。

例如,下面这个就是OK的(产生与上面相同的结果):

body
  padding -5px

有Stylus无法处理的属性值?unquote()可以帮你:

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

生成为:

filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了