My Mixins for stylus

mixin.styl

sm-size = 575.98px
md-size = 767.98px
lg-size = 991.98px
xl-size = 1199.98px
first = 'max'

sm()
  @media ({first}-width: sm-size)
    {block}

md()
  @media ({first}-width: md-size)
    {block}

lg()
  @media ({first}-width: lg-size)
    {block}

xl()
  @media ({first}-width: xl-size)
    {block}

portrait()
  @media (orientation: portrait)
    {block}

landscape()
  @media (orientation: landscape)
    {block}


//  customs
main-gradient()
  background linear-gradient(#0278c3 0%, #0d92e8 100%)

main-shadow()
  box-shadow 0 4px 12px rgba(0, 0, 0, 0.16)

_em($v)
  return em($v, fontsize)


trim($numLines = 0)
  if ($numLines > 0)
    display: -webkit-box
    -webkit-line-clamp: $numLines
    -webkit-box-orient: vertical
    overflow: hidden
  else
    text-overflow: ellipsis
    white-space: nowrap
    overflow: hidden


font(fname, fstyle, fweight, furl)
  @font-face
    font-family fname
    font-style fstyle
    font-weight fweight
    font-display swap
    src local(fname), url(furl) format('woff2')


selection($color, $background)
  &::selection
    color: $color
    background: $background


placeholder()
  &::-webkit-input-placeholder
    {block}

  &:-moz-placeholder
    {block}

  &::-moz-placeholder
    {block}

  &:-ms-input-placeholder
    {block}


clearfix()
  &:after
    content ""
    display table
    clear both

    
em($v, $delimeter = 16)
  return 1em * $v / ($delimeter)

rem($v, $delimeter = 16)
  return 1rem * $v / ($delimeter)

vh($v)
  return $v / (1080 / 75) * 1em

strip-units($v)
  return 1 * $v