mixins-base/_mixins.sass

/*
 * Fixes an element on the page to take up all the space or only part of it.
 * $side: all (default), top, bottom
 *
 * Examples: @include pin() , @include pin('top'), @include pin('bottom', 2500)
 */
@mixin pin($side: all, $z-index: 1000)
  position: fixed
  left: 0
  right: 0
  z-index: $z-index
  @if $side == 'all'
    top: 0
    bottom: 0
  @else if $side == 'top'
    top: 0
  @else if $side == 'bottom'
    bottom: 0

/*
 * Add a border through the shadows avoiding extra space.
 * $size: unit
 *
 * Examples: @include sizeSquare(4rem) , @include sizeSquare(10px)
 */
@mixin sizeSquare($size)
  width: $size
  height: $size
  
/*
 * Remove initial styles <ul>
 *
 * Examples: @include ulReset()
 */
@mixin ulReset()
  list-style: none
  padding: initial
  margin: initial
  
/*
 * Remove initial styles <button>
 *
 * Examples: @include buttonReset()
 */
@mixin buttonReset()
  background: initial
  border: initial
  padding: initial
  margin: initial

/*
 * Add a border through the shadows avoiding extra space.
 * $size: 1px (default), unit
 * $color: black (default), color
 * $side: all (default), top, right, bottom, left
 *
 * Examples: @include border(), @include border(2px, red), @include border(2px, red, left)
 */
@mixin border($size: 1px, $color: black, $side: all)
  border: 0
  -webkit-appearance: none
  @if $side == 'all'
    box-shadow: inset 0 0 0 $size $color
  @else if $side == 'top'
    box-shadow: inset 0 $size 0 0 $color
  @else if $side == 'right'
    box-shadow: inset -#{$size} 0 0 0 $color
  @else if $side == 'left'
    box-shadow: inset $size 0 0 0 $color
  @else if $side == 'bottom'
    box-shadow: inset 0 -#{$size} 0 0 $color

/*
 * Add a rotation animation.
 * $speed: 1s (default), seconds
 *
 * Examples: @include animationRotate(2s), @include animationRotate(0.5s)
 */
@mixin animationRotate($speed: 1s)
  $id: unique-id()
  @keyframes#{$id}
      from
        transform: rotate(0)
      to
        transform: rotate(360deg)
  animation:
    name: $id
    duration: $speed
    iteration-count: infinite
    timing-function: linear

/*
 * Add a pulse animation.
 * $speed: 1s (default), seconds
 * $size: 1rem (default), unit
 * $color: black (default), color
 * $iteration: infinite (default), number
 *
 * Examples: @include animationPulse(2s), @include animationPulse(0.5s, 2rem, yellow, 1)
 */    
@mixin animationPulse($speed: 1s, $size: 1rem, $color: black, $iteration: infinite)
  $id: unique-id()
  @keyframes #{$id}
      from
        box-shadow: 0 0 0 0 $color
      to
        box-shadow: 0 0 0 $size transparentize($color, 1)
  animation:
    name: $id
    duration: $speed
    iteration-count: $iteration
    timing-function: linear
    
/*
 * Add a opacity animation.
 * $speed: 1s (default), seconds
 * $iteration: infinite (default), number
 *
 * Examples: @include animationOpacity(2s), @include animationOpacity(0.5s, 1)
 */  
@mixin animationOpacity($speed: 1s, $iteration: infinite)
  $id: unique-id()
  @keyframes #{$id}
      from
        opacity: 0
      to
        opacity: 1
  animation:
    name: $id
    duration: $speed
    iteration-count: $iteration
    timing-function: linear
    direction: alternate

/*
 * Create animation from a horizontal sprite sheet
 *
 * Examples: @include animationSpriteSheet(6, "../img/sprite.png", 1.5s)
 */ 
@mixin animationSpriteSheet($steps, $image, $speed: 1s, $iteration: infinite)
  $id: unique-id()
  @keyframes #{$id}
    100%
      background-position-x: calc(#{$steps} * -100%)
  animation:
    name: $id
    duration: $speed
    iteration-count: $iteration
    timing-function: steps(#{$steps}) 
  background:
    image: url(#{$image})
    size: calc(#{$steps} * 100%) auto
    
/*
 * Center all child elements horizontally and vertically.
 *
 * Examples: @include centerChilds()
 */
@mixin centerChilds()
  display: flex
  justify-content: center
  align-items: center

/*
 * Mimics grid-gap separation for flex
 *
 * Examples: @include gridGap(2.5rem)
 */
@mixin gridGap($size: 1rem)
  margin: 0 $size
  &:first-child
    margin-left: 0
  &:last-child
    margin-right: 0