CSS预处理工具--Stylus（2）

内建函数：

• 颜色函数： darken/lighten

.btn-primary
  background-color $primary-color
  border-color darken($primary-color, 15%)

.link
  color red

  &:hover
    color lighten(red, 10%)

• 嵌入图片：embedurl

background: embedurl('logo.png')
// => background: url("data:image/png;base64,…")

background: embedurl('logo.svg', 'utf8')
// => background: url("data:image/svg+xml;charset=utf-8,…")

• 添加前缀：+prefix-classes(prefix)

+prefix-classes('.tqb-dp-')
  .header
    height 2.5rem

    .back-button
      color white

编译为：

.tqb-dp-header {
  height: 2.5rem;
}
.tqb-dp-header .tqb-dp-back-button {
  color: white;
}

生态：

• NIB

Nib 是 Stylus 样式库，用于将样式进行兼容性处理 类似 Compass

position:

#back-to-top
  fixed bottom right

编译为：

#back-to-top {
  position: fixed;
  right: 0;
  bottom: 0;
}

渐变色：

@import 'nib'

body
  background linear-gradient(top, white, black)

编译为：

body {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

CSS小技巧~

固定比例的容器：

.intrinsic-ratio-box
  height 0
  padding-bottom 20%
  position relative

  .real-container
    absolute top left
    width 100%
    height 100%

视觉上不可见:

屏幕上不可见，但对搜索引擎和阅读器可见。

.visually-hidden
  border 0
  clip rect(0,0,0,0)
  position absolute
  width 1px
  height 1px
  margin -1px
  overflow hidden
  padding 0
``