SASS Snippets

breakpoint.sass

=breakpoint($point)
  @if #{$point} == "huge"
    @media (min-width: 1200px)
      @content

  @else if #{$point} == "large"
    @media (min-width: 800px)
      @content

  @else if #{$point} == "medium"
    @media (min-width: 500px)
      @content

  @else if #{$point} == "small"
    @media (max-width: 500px)
      @content
    @media only screen and (max-device-width: 500px) and (orientation: portrait)
      @content
    @media only screen and (min-device-height: 300px) and (max-device-height: 700px) and (orientation: landscape)
      @content

font-face.sass

// @include font( 'Helvetica', 500, 'normal', '../fonts/', 'helvetica/helvetica-book')
// @include font( 'Helvetica', 500, 'italic', '../fonts/', 'helvetica/helvetica-italic')
// @include font( 'Helvetica', 700, 'normal', '../fonts/', 'helvetica/helvetica-bold')
// @include font( 'Helvetica', 700, 'italic', '../fonts/', 'helvetica/helvetica-bold-italic')

@mixin font($name, $weight, $style, $dir, $filename)
	@font-face
		font-family: $name
		src: url($dir + $filename + '.eot')
		src: url($dir + $filename + '.eot?#iefix') format("embedded-opentype"), url($dir + $filename + '.woff') format("woff")
		font-weight: $weight
		font-style: $style