A set of sass helpers that can be extended to group most used rules

_helpers.sass

%position-fixed
  position: fixed
%position-relative
  position: relative
%position-absolute
  position: absolute


%width-100
  width: 100%
%height-100
  height: 100%
%height-0
  height: 0

//Position Helpers
%top-0
  top: 0
%top-50
  top: 50%
%left-0
  left: 0
%right-0
  right: 0
%bottom-0
  bottom: 0

//DISPLAY Helpers
%display-table
  display: table
%display-inline-table
  display: inline-table
%display-table-cell
  display: table-cell
%display-inline-block
  display: inline-block
%display-inline
  display: inline
%display-block
  display: block
%display-none
  display: none


%vertical-center
  vertical-align: middle

// AUTO WIDTH TABLE CELL
%auto-width-table-cell
  width: 1px
  white-space: nowrap



//TEXT ALIGN HELPERS
%text-left
  text-align: left
%text-right
  text-align: right
%text-center
  text-align: center
%text-decoration-none
  text-decoration: none
%text-uppercase
  text-transform: uppercase
%font-italic
  font-style: italic
//VISIBILITY HELPERS
%visibility-false
  visibility: hidden
%visibility-true
  visibility: visible

//OPACITY HRLPERS
%opacity-0
  opacity: 0
%opacity-1
  opacity: 1

/** Break line */
.break-line
  display: block

// ----- rem ----- //

@function parseInt($n)
  @return $n / ($n * 0 + 1)



//supponing that your root font size is 16 px
=rem($property, $values)
  $px: ()
  $rem: ()
  @each $value in $values
    @if $value == 0 or $value == auto
      $px: append($px, $value)
      $rem: append($rem, $value)
    @else
      $unit: unit($value)
      $val: parseInt($value)
      @if $unit == "px"
        $px: append($px, $value)
        $rem: append($rem, $val / 16 + rem)
      @if $unit == "rem"
        $px: append($px, $val * 16 + px)
        $rem: append($rem, $value)
  @if $px == $rem
    #{$property}: $px
  @else
    #{$property}: $px
    #{$property}: $rem

// overflow auto //
%overflow-auto
  clear: both
  overflow: auto

// ------ Cursors ------- //
%cursor-pointer
  &:hover
    cursor: pointer

%overflow-hidden
  overflow: hidden

/* truncate */
=truncate($max-width)
  width: $max-width
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

// ----- Clearfix ----- //

%clearfix
  &:before,&:after
    content: ""
    display: table
  &:after
    clear: both

=box-sizing($box-model)
  -webkit-box-sizing: $box-model // Safari <= 5
  -moz-box-sizing: $box-model // Firefox <= 19
  box-sizing: $box-model


// -------------------------------------
//   Mixins
// -------------------------------------
=vertical-center
  &:before
    content: ""
    display: inline-block
    vertical-align: middle
    // margin-right: -0.25em
    height: 100%

=triangle($width-left, $width-right, $height, $color)
  width: 0
  height: 0
  line-height: 0
  border-style: solid
  border-width: $width-left + px $width-right + px 0 $height + px
  border-color: $color transparent transparent transparent
  _border-color: $color #000000 #000000 #000000
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
  -webkit-transform:rotate(360deg)


/*** PRESETTED CLASSES ***/
.img-circle
  border-radius: 50%

.clearfix
  +clearfix()

.truncate
  display: table
  table-layout: fixed
  width: 100%
  white-space: nowrap
  -webkit-line-clamp: 2
  & > *
    display: table-cell
    overflow: hidden
    text-overflow: ellipsis

.hide
  display: none