Alright, time to post something useful as lately I have become lazy 🙂 . Here are a couple of useful SASS mixins that I always use on the websites that I design.
Set width x height of an element
Sass
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}Clearfix
Sass
@mixin clearfix() {
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}Absolute Position
Sass
@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: absolute;
}Border Radius
Sass
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
background-clip: padding-box;
}Background Gradient
Sass
@mixin background-gradient($startColor: #3c3c3c, $endColor: #999999) {
background-color: $startColor;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from($startColor),
to($endColor)
);
background-image: -webkit-linear-gradient(top, $startColor, $endColor);
background-image: -moz-linear-gradient(top, $startColor, $endColor);
background-image: -ms-linear-gradient(top, $startColor, $endColor);
background-image: -o-linear-gradient(top, $startColor, $endColor);
background-image: linear-gradient(top, $startColor, $endColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}Box Shadow
Sass
@mixin box-shadow(
$x: 2px,
$y: 2px,
$blur: 5px,
$color: rgba(0, 0, 0, 0.4),
$inset: ''
) {
@if ($inset != '') {
-webkit-box-shadow: $inset $x $y $blur $color;
-moz-box-shadow: $inset $x $y $blur $color;
box-shadow: $inset $x $y $blur $color;
} @else {
-webkit-box-shadow: $x $y $blur $color;
-moz-box-shadow: $x $y $blur $color;
box-shadow: $x $y $blur $color;
}
}Text Shadow
Sass
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
text-shadow: $x $y $blur $color;
}Transition Animation
Sass
@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
-moz-transition: $what $length $easing;
-o-transition: $what $length $easing;
-webkit-transition: $what $length $easing;
-ms-transition: $what $length $easing;
transition: $what $length $easing;
}Hope you guys like it. Don’t forget to share it with others and leave comments.
Leave a Reply