mix.sass

=vendor($attribute, $value)
    -webkit-#{$attribute}: #{$value}
    -moz-#{$attribute}: #{$value}
    -ms-#{$attribute}: #{$value}
    -o-#{$attribute}: #{$value}
    #{$attribute}: #{$value}

=rotate($deg)
    display: inline-block
    +vendor(transform, rotate(#{$deg}deg))

=e($name)
    @at-root #{&}__#{$name}
        @content

=has($name)
    @at-root #{&}__#{$name}
        @content

=m($name)
    @at-root #{&}--#{$name}
        @content

=when($name)
    @at-root #{&}--#{$name}
        @content

=if($modifiers)
    @each $modifier in $modifiers
        @at-root #{&}--#{$modifier}
            @content

=then($elements)
    @each $element in $elements
        @at-root #{&} .#{$block}__#{$element}
            @content

=on($modifiers)
    @each $modifier in $modifiers
        @at-root .#{$block}--#{$modifier} #{&}
            @content

=component()
    @at-root .#{$block}
        @content

=circle()
    +vendor('border-radius', '100%')
    

=screen-is-xs()
  @media (max-width: 48em)
    @content

=screen-is-sm()
  @media (min-width: 48em)
    @content

=screen-is-md()
  @media (min-width: 64em)
    @content

=screen-is-lg()
  @media (min-width: 75em)
    @content

=position($top, $right: $top, $bottom: $top, $left: $right)
  position: absolute
  top: $top
  right: $right
  bottom: $bottom
  left: $left