Stylus 变量 Variables

🌙
手机阅读
本文目录结构

变量

我们可以指定表达式为变量,然后在我们的样式中贯穿使用:

font-size = 14px

body
  font font-size Arial, sans-seri

编译为:

body {
  font: 14px Arial, sans-serif;
}

变量甚至可以组成一个表达式列表:


font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font sans-serif


编译为:

body {
  font: 14px "Lucida Grande", Arial sans-serif;
}


标识符(变量名,函数等),也可能包括$字符。例如:

$font-size = 14px
body {
  font: $font-size sans-serif;
}


属性查找

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


#logo
  position: absolute
  top: 50%
  left: 50%
  width: w = 150px
  height: h = 80px
  margin-left: -(w / 2)
  margin-top: -(h / 2)


我们不使用这里的变量wh, 而是简单地前置@字符在属性名前来访问该属性名对应的值:

#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)


另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中,我们默认指定z-index值为1,但是,只有在z-index之前未指定的时候才这样:


position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute

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

body
  color: red
  ul
    li
      color: blue
      a
        background-color: @color

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

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

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

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