Sass Snippets

_cssarrow.scss

@mixin cssArrow($size, $color1, $color2, $color3, $color4){
    border-color: $color1 $color2 $color3 $color4;
    border-style:solid;
    border-width:$size;
    width:0;
    height:0;
}

_inlineBlock.scss

// Cross-browser inline-block
@mixin inlineBlock(){
    display:inline-block;
    // IE7 fix
    *display:inline;
    *zoom:1;
}

_media-object.scss

@mixin media-object($margin:10px, $position: left, $formating-context: 'overflow', $media: '.media', $block: '.block') {
    @include pie-clearfix; // or extend a .clearfix class
    #{unquote($block)} {
        @if $formating-context == 'overflow' {
            overflow:hidden;
        } @else {
            display:table-cell;
            width:10000px;
            *width:auto;
            *zoom:1;
        }
    }
    #{unquote($media)} {
        float:$position;
        img{display:block;}
        @if $margin > 0 {
            margin-#{opposite-position($position)}:$margin;
        }
    }
}

// Usage
.box{
 @include media-object(10px, left, 'table-cell'); 
}

/*
<div class="box">
  <img class="media" src="http://lorempixel.com/60/60/people" />
  <div class="block">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate quam. Sed lobortis tempus dui, quis dapibus purus consequat eu. Morbi ut egestas mi. 

    <div class="box">
      <img class="media" src="http://lorempixel.com/30/30/people" />
      	<div class="block">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
    	</div>
    </div>

    <div class="box">
      <img class="media" src="http://lorempixel.com/30/30/people" />
      	<div class="block">
           Pellentesque ut vulputate quam. Sed lobortis tempus dui, quis dapibus purus consequat
    	</div>
    </div>    

  </div>
</div>
*/

_positions.scss

@mixin position ($position: relative, $coordinates: 0 0 0 0) {
  @if type-of($position) == list {
    $coordinates: $position;
    $position: relative;
  }

  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  position: $position;

  @if not(unitless($top)) {
    top: $top;
  }

  @if not(unitless($right)) {
    right: $right;
  }

  @if not(unitless($bottom)) {
    bottom: $bottom;
  }

  @if not(unitless($left)) {
    left: $left;
  }
}

// Usage
.box{
  @include position(fixed, 0px 0 0 0px);
}

_pxtoem.scss

@function pxToEm($target-px, $context: 13px) {
  @return ($target-px / $context) * 1em;
}

_pxtopercent.scss

@function pxToPercent($target, $context) {
    @return percentage($target / $context);
}

_shade.scss

// Add percentage of black to a color
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}

_tint.scss

// Add percentage of white to a color
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

_truncating.scss

// Truncating text using only CSS

@mixin truncating($width: 200px){
    text-overflow: ellipsis;
    display: inline-block;
    width: $width;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}