Stylus 混入 #

// 定义混入
border-radius(radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  border-radius radius

// 使用混入
.button
  border-radius(5px)

.card
  border-radius(10px)

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.card {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

// 定义无参数混入
clearfix()
  &::after
    content ""
    display table
    clear both

// 使用
.container
  clearfix()

.row
  clearfix()

// 定义带参数的混入
button-style(bg-color, text-color)
  display inline-block
  padding 10px 20px
  background-color bg-color
  color text-color
  border none
  border-radius 4px
  cursor pointer

// 使用
.btn-primary
  button-style(#3498db, #fff)

.btn-danger
  button-style(#e74c3c, #fff)

// 定义默认参数
box-shadow(x = 0, y = 2px, blur = 10px, color = rgba(0, 0, 0, 0.1))
  -webkit-box-shadow x y blur color
  -moz-box-shadow x y blur color
  box-shadow x y blur color

// 使用默认值
.card
  box-shadow()  // 使用所有默认值

.modal
  box-shadow(0, 5px, 30px)  // 部分覆盖

// 使用命名参数
transition(property, duration, timing = ease)
  -webkit-transition property duration timing
  -moz-transition property duration timing
  transition property duration timing

// 位置参数
.element
  transition(all, 0.3s)

// 命名参数（可以改变顺序）
.element
  transition(duration: 0.5s, property: opacity)

// 混合使用
.element
  transition(opacity, 0.3s, timing: ease-in-out)

// 收集所有参数
box-shadow(shadows...)
  -webkit-box-shadow shadows
  -moz-box-shadow shadows
  box-shadow shadows

// 使用
.card
  box-shadow(0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1))

// 多个阴影
.modal
  box-shadow(
    0 0 0 1px rgba(0,0,0,0.1),
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1)
  )

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

// 使用
.box
  border-radius(5px)

.complex
  border-radius(5px 10px 5px 10px)

// 定义块级混入
mobile()
  @media (max-width: 768px)
    {block}

// 使用
.container
  width 1200px
  
  +mobile()
    width 100%
    padding 0 15px

.container {
  width: 1200px;
}
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}

// 定义断点混入
breakpoints = {
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
}

// 向上断点
media-up(breakpoint)
  @media (min-width: breakpoint)
    {block}

// 向下断点
media-down(breakpoint)
  @media (max-width: breakpoint - 1)
    {block}

// 仅在某个范围
media-between(min, max)
  @media (min-width: min) and (max-width: max - 1)
    {block}

// 使用
.container
  width 100%
  
  +media-up(breakpoints.sm)
    max-width 540px
    
  +media-up(breakpoints.md)
    max-width 720px
    
  +media-up(breakpoints.lg)
    max-width 960px
    
  +media-up(breakpoints.xl)
    max-width 1140px

// 定义 hover 混入
hover-supported()
  @media (hover: hover)
    {block}

// 使用
.button
  background-color #3498db
  
  +hover-supported()
    background-color darken(#3498db, 10%)

// 返回计算值
calculate-rem(px)
  (px / 16) * 1rem

// 使用
body
  font-size calculate-rem(16)

h1
  font-size calculate-rem(32)

// 根据参数生成不同样式
button-variant(color, style = 'solid')
  if style == 'solid'
    background-color color
    color #fff
    border 2px solid color
  else if style == 'outline'
    background-color transparent
    color color
    border 2px solid color
  else if style == 'ghost'
    background-color transparent
    color color
    border none

// 使用
.btn-primary
  button-variant(#3498db)

.btn-outline
  button-variant(#3498db, 'outline')

.btn-ghost
  button-variant(#3498db, 'ghost')

// 变换
transform(transform-value)
  -webkit-transform transform-value
  -moz-transform transform-value
  -ms-transform transform-value
  -o-transform transform-value
  transform transform-value

// 过渡
transition(args...)
  -webkit-transition args
  -moz-transition args
  -ms-transition args
  -o-transition args
  transition args

// 动画
animation(args...)
  -webkit-animation args
  -moz-animation args
  -ms-animation args
  -o-animation args
  animation args

// 使用
.element
  transform(rotate(45deg))
  transition(all 0.3s ease)
  animation(fadeIn 0.5s ease)

// 单行截断
text-overflow()
  overflow hidden
  text-overflow ellipsis
  white-space nowrap

// 多行截断
line-clamp(lines = 2)
  display -webkit-box
  -webkit-line-clamp lines
  -webkit-box-orient vertical
  overflow hidden

// 使用
.title
  text-overflow()
  max-width 200px

.description
  line-clamp(3)

// Flex 容器
flex-container(direction = row, justify = flex-start, align = stretch)
  display flex
  flex-direction direction
  justify-content justify
  align-items align

// Flex 项目
flex-item(grow = 0, shrink = 1, basis = auto)
  flex grow shrink basis

// 居中
flex-center()
  display flex
  justify-content center
  align-items center

// 使用
.nav
  flex-container(row, space-between, center)

.content
  flex-item(1, 0, auto)

.modal
  flex-center()
  position fixed
  top 0
  left 0
  width 100%
  height 100%

// 绝对定位
absolute(top = null, right = null, bottom = null, left = null)
  position absolute
  top top
  right right
  bottom bottom
  left left

// 相对定位
relative(top = null, right = null, bottom = null, left = null)
  position relative
  top top
  right right
  bottom bottom
  left left

// 固定定位
fixed(top = null, right = null, bottom = null, left = null)
  position fixed
  top top
  right right
  bottom bottom
  left left

// 居中定位
center(width = null, height = null)
  position absolute
  top 50%
  left 50%
  if width and height
    margin-left -(width / 2)
    margin-top -(height / 2)
  else
    transform(translate(-50%, -50%))

// 使用
.tooltip
  absolute(10px, 10px)

.modal
  fixed(0, 0, 0, 0)
  background-color rgba(0, 0, 0, 0.5)

.spinner
  center(40px, 40px)

// 设置尺寸
size(width, height = width)
  width width
  height height

// 最小尺寸
min-size(width, height = width)
  min-width width
  min-height height

// 最大尺寸
max-size(width, height = width)
  max-width width
  max-height height

// 使用
.icon
  size(24px)

.avatar
  size(50px, 50px)
  border-radius 50%

// 线性渐变
linear-gradient(direction, colors...)
  background -webkit-linear-gradient(direction, colors)
  background -moz-linear-gradient(direction, colors)
  background -ms-linear-gradient(direction, colors)
  background -o-linear-gradient(direction, colors)
  background linear-gradient(direction, colors)

// 径向渐变
radial-gradient(shape = circle, colors...)
  background -webkit-radial-gradient(shape, colors)
  background -moz-radial-gradient(shape, colors)
  background -ms-radial-gradient(shape, colors)
  background -o-radial-gradient(shape, colors)
  background radial-gradient(shape, colors)

// 使用
.hero
  linear-gradient(to right, #3498db, #2ecc71)

.card
  linear-gradient(135deg, #667eea 0%, #764ba2 100%)

.button
  radial-gradient(circle, #fff 0%, #ddd 100%)

// CSS 三角形
triangle(direction = up, size = 10px, color = #333)
  width 0
  height 0
  
  if direction == up
    border-left size solid transparent
    border-right size solid transparent
    border-bottom size * 1.5 solid color
  else if direction == down
    border-left size solid transparent
    border-right size solid transparent
    border-top size * 1.5 solid color
  else if direction == left
    border-top size solid transparent
    border-bottom size solid transparent
    border-right size * 1.5 solid color
  else if direction == right
    border-top size solid transparent
    border-bottom size solid transparent
    border-left size * 1.5 solid color

// 使用
.tooltip::after
  triangle(down, 8px, #333)

// 推荐：使用动词或描述性名称
flex-center()
text-overflow()
border-radius()

// 不推荐：无意义名称
helper1()
do-something()

// 推荐：为常用参数设置默认值
box-shadow(x = 0, y = 2px, blur = 10px, color = rgba(0,0,0,0.1))

// 不推荐：无默认值
box-shadow(x, y, blur, color)

// 推荐：每个混入只做一件事
border-radius(radius)
  border-radius radius

box-shadow(args...)
  box-shadow args

// 不推荐：混入做太多事
card-styles(radius, shadow, padding)
  border-radius radius
  box-shadow shadow
  padding padding