SASS from LESS Classes

core-classes.sass

/*
 * A SASS conversion by Leo O'Donnell ( http://github.com/leopoldodonnell ) of the excellent work by Jeffrey Way
 * @see http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/
 * @see http://snipplr.com/view/47181/less-classes/
 */
@mixin border-radius( $radius: 3px )
	-webkit-border-radius:	$radius
	-moz-border-radius:	$radius
	border-radius:		$radius		


@mixin outline-radius( $radius: 3px )
	-webkit-outline-radius: $radius
	-moz-outline-radius: 	$radius
	outline-radius: 	$radius		


@mixin box-shadow( $x : 2px, $y : 2px, $blur : 5px, $spread : 0, $color : rgba(0,0,0,.6) )
	-webkit-box-shadow:	$x $y $blur $spread $color
	-moz-box-shadow:	$x $y $blur $spread $color
	box-shadow:		$x $y $blur $spread $color


@mixin transition( $what : all, $length : 1s, $easing : ease-in-out )
	-webkit-transition:	$what $length $easing
	-moz-transition:	$what $length $easing
	-o-transition:		$what $length $easing
	transition:		$what $length $easing		


@mixin transform( $params )
	-webkit-transform:	$params
	-moz-transform:		$params
	transform:		$params


@mixin box( $orient : horizontal, $pack : center, $align : center )
	display: -webkit-box
	display: -moz-box
	display: box
	
	-webkit-box-orient:	$orient
	-moz-box-orient:	$orient
	box-orient:		$orient
	
	-webkit-box-pack:	$pack
	-moz-box-pack:		$pack
	box-pack:		$pack
	
	-webkit-box-align:	$align
	-moz-box-align:		$align
	box-align:		$align	


@mixin flex( $val : 1 )
	-webkit-box-flex:	$val
	-moz-box-flex:		$val
	box-flex:		$val


@mixin resize( $direction )
	-webkit-resize:	$direction
	-moz-resize:	$direction
	resize:		$direction


@mixin linear-gradient( $begin: black, $end: white, $switch : 100% )
	background: $begin
	background: -webkit-gradient(linear, 0 0, 0 100%, from($begin), color-stop($switch, $end))
	background: -moz-linear-gradient(top, $begin, $end $switch)
	background: -o-linear-gradient(top, $begin, $end $switch)
	background: linear-gradient(top, $begin, $end $switch)

  
@mixin double-borders( $colorOne : green, $colorTwo : red, $radius : 0 )
	border: 1px solid $colorOne
	
	-webkit-box-shadow:	0 0 0 1px $colorTwo
	-moz-box-shadow:	0 0 0 1px $colorTwo
	box-shadow:		0 0 0 1px $colorTwo
	
	@include border-radius( $radius )


@mixin triple-borders( $colorOne : green, $colorTwo : red, $colorThree : blue, $radius : 0 )
	border: 1px solid $colorOne
	
	@include border-radius( $radius )
	
	-webkit-box-shadow:	0 0 0 1px $colorTwo, 0 0 0 2px $colorThree
	-moz-box-shadow:	0 0 0 1px $colorTwo, 0 0 0 2px $colorThree
	box-shadow:		0 0 0 1px $colorTwo, 0 0 0 2px $colorThree


@mixin columns( $count : 3, $gap : 10 )
	-webkit-column-count:	$count
	-moz-column-count:	$count
	column-count:		$count
	
	-webkit-column-gap:	$gap
	-moz-column-gap:	$gap
	column-gap:		$gap


@mixin box-sizing( $type : border-box )
	-webkit-box-sizing:	$type
	-moz-box-sizing:	$type
	box-sizing:		$type