stylobate/lib/kinds/icon/kind-icon.styl

Framework for writing really abstract CSS in Stylus

kind-icon($this)
  +cache()
    kind('block' inline)
    vertical-align: middle

    margin-top: -0.2em // http://dabblet.com/gist/6185672

    background: 50% no-repeat

  &
    kind-icon_($this)

  // Base styles for replaced icons (on `<img/>`)
  if $this.params.replace-image
    +cache('replace-image')
      content: ""

      width: 0
      height 0

kind-icon_($this)
  $size = $this.params.size
  $size = $size $size if $size and length($size) == 1
  $image = $this.urls[0]
  $align = utilus_retrieve($this.params, baseline top bottom)

  if !$size and $image and !($this.params.sizeless)
    $size = image-size($image, true)

  if $align
    vertical-align: $align

  if $size
    $width = $size[0]
    $height = $size[1]

    if $this.params.replace-image
      padding: 0 $width $height 0
    else
      width: $width
      height $height

  if $image
    background-image: url($image)