basic functions for sass

_functions.sass

//handling vendor extension
//shorthand for box with rounded top corners 
@mixin top-border-radius ($radius: 5px) {
  @include border-radius('#{$radius} #{$radius} 0 0');
}

//shorthand for the border-radius property (http://www.w3.org/TR/css3-background/#the-border-radius)
//also call the PIE IE fallback
//accept the same params listed in the w3c specs
//use example
//@include border-radius('5px 4px 3px/2px 5px')
//output example
//-webkit-border-radius: 5px 4px 3px/2px 5px;
//  -moz-border-radius: 5px 4px 3px/2px 5px;
//  border-radius: 5px 4px 3px/2px 5px;
@mixin border-radius ($param:'5px') {
  -webkit-border-radius: unquote($param);
  -moz-border-radius: unquote($param);
  border-radius: unquote($param);
  @include pie; //IE
}
@mixin transition($param){
  -moz-transition : unquote($param);
  -webkit-transition: unquote($param);
  transition : unquote($param);
}
@mixin transition-property($param){
  -moz-transition-property : unquote($param);
  -webkit-transition-property: unquote($param);
  transition-property : unquote($param);
}
@mixin transition-duration($param){
  -moz-transition-duration : unquote($param);
  -webkit-transition-duration: unquote($param);
  transition-duration : unquote($param);
}
@mixin transition-timing-function($param){
  -moz-transition-timing-function : unquote($param);
  -webkit-transition-timing-function: unquote($param);
  transition-timing-function : unquote($param);
}
@mixin transition-delay($param){
  -moz-transition-delay : unquote($param);
  -webkit-transition-delay: unquote($param);
  transition-delay : unquote($param);
}
//shorthand for the box-shadow property (http://www.w3.org/TR/css3-background/#the-box-shadow)
//@param length x horizontal offset of the shadow.
//@param length y vertical offset
//@param length blur radius
//@param color color of the shadow 
//@param int an opacity to apply to the color (between 0 and 100)
@mixin box-shadow ($x: 0, $y: 0, $blur: 5px, $color: #cebdb2, $opacity : 0) {
  -moz-box-shadow: $x $y $blur fade-out($color, $opacity/100);
  -webkit-box-shadow: $x $y $blur fade-out($color, $opacity/100);
  box-shadow: $x $y $blur fade-out($color, $opacity/100);
  @include pie;	//IE								  
}
//simple top to bottom 2 colours gradient
//@param color start
//@param color end
@mixin vertical-gradient ($start , $end) {
	background: $start;/* Old browsers */
	background: -moz-linear-gradient(top, $start 0%, $end 100%); /* FF3.6+ */
	background: -webkit-gradient(linear,  left top, left bottom, color-stop(0%,$start), color-stop(100%,$end));/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, $start 0%,$end 100%);/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, $start 0%,$end 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, $start 0%,$end 100%); /* IE10+ */
	-pie-background: linear-gradient($start, $end);/* IE6-9 */
	background: linear-gradient(top, $start 0%,$end 100%);/* W3C */
	@include pie //IE 							
}

//shorthand for the opacity property (http://www.w3.org/TR/css3-color/#opacity)
//passed value must be between 0 and 100 and not 0 and 1
@mixin opacity($opacity){
  filter:alpha(opacity=$opacity);
  -moz-opacity:opacity/100;
  -o-opacity:opacity/100;
  opacity: $opacity/100;
}

//generic mixins
//-----------------

//center vertically and horizontally
@mixin center-vh($min-height,$ratio:2.57){
  font-size: $min-height / $ratio;
  min-height: $min-height;
  line-height: $min-height;
  text-align: center;
  vertical-align:middle;
}

//shorthand for a background image without replacing the background color
@mixin background_image($url,$repeat:'no-repeat',$position:'left top'){
   background-image:url($url);
   background-repeat : $repeat;
   background-position: $position;
}

//include pie.htc (http://css3pie.com/) the file must be in the css directory
@mixin pie {
	behavior: url(/PIE.htc);
}