css3 mixins for less

Below are the list of mixins which are very useful while implementing less for your next project.

Border Radius
.border_radius(@radius: 10px) {
.border_radius(@radius, @radius);
}

.border_radius(@radius_top, @radius_bottom){
.border_radius(@radius_top, @radius_top, @radius_bottom, @radius_bottom);
}

.border_radius(@radius_top_left, @radius_top_right, @radius_bottom_right, @radius_bottom_left)
{
-webkit-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
-moz-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
}

@mixins for shadows

.box_shadow(@shadow_x:5px, @shadow_y:5px, @shadow_rad:5px, @shadow_color:#ccc) {
box-shadow: @shadow_x @shadow_y @shadow_rad @shadow_color;
-webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
-moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
}

.text_shadow(@shadow_color:#ccc){
text-shadow:2px 1px 2px @shadow_col;
}
@mixin for opacity
.opacity(@op:100) {
filter:alpha(opacity=@op);
-moz-opacity:@op/100;
-khtml-opacity:@op/100;
opacity:@op/100;
}

@mixin for background gradient

.background_gradient(@from:#000, @to:#EEE){
background: @from;
background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
background-image: -moz-linear-gradient(top, @from, @to);
filter: formatstring(“progid:DXImageTransform.Microsoft.gradient(startColorstr=’{0}’, endColorstr=’{1}’)”, @from, @to); /* IE6,IE7 */
-ms-filter: formatstring(“\”progid:DXImageTransform.Microsoft.gradient(startColorStr=’{0}’, EndColorStr=’{1}’)\”", @from, @to); /* IE8 */
}

.transition(@range: all, @time: 1s, @ease: ease-in-out)
{
-moz-transition: @range @time @ease;
-webkit-transition: @range @time @ease;
-o-transition: @range @time @ease;
transition: @range @time @ease;
}

/*Transformations*/
.skew(@angle_x:35, @angle_y:0)
{
-webkit-transform: skew(formatstring(“{0}deg”, @angle_x), formatstring(“{0}deg”, @angle_y));
-moz-transform: skew(formatstring(“{0}deg”, @angle_x), formatstring(“{0}deg”, @angle_y));
-o-transform: skew(formatstring(“{0}deg”, @angle_x), formatstring(“{0}deg”, @angle_y));
-ms-transform: skew(formatstring(“{0}deg”, @angle_x), formatstring(“{0}deg”, @angle_y));
transform: skew(formatstring(“{0}deg”, @angle_x), formatstring(“{0}deg”, @angle_y));
}

.scale(@scale_x: 1)
{
-webkit-transform: scale(@scale_x);
-moz-transform: scale(@scale_x);
-o-transform: scale(@scale_x);
-ms-transform: scale(@scale_x);
transform: scale(@scale_x);
}

.rotate(@angle:35)
{
-webkit-transform: rotate(formatstring(“{0}deg”, @deg));
-moz-transform: rotate(formatstring(“{0}deg”, @deg));
-o-transform: rotate(formatstring(“{0}deg”, @deg));
-ms-transform: rotate(formatstring(“{0}deg”, @deg));
transform: rotate(formatstring(“{0}deg”, @deg));
}

.translate(@move_x: 10px, @move_y: 10px)
{
-webkit-transform: translate(@move_x, @move_y);
-moz-transform: translate(@move_x, @move_y);
-o-transform: translate(@move_x, @move_y);
-ms-transform:translate(@move_x, @move_y);
transform: translate(@move_x, @move_y);
}

Usage