Sass is the most mature, stable, and powerful professional-level CSS extension language in the world. I have been using Sass for quite sometime and found out that mixins is something all front-end developers would enjoy and take advantage of to save time and be more efficient.
A mixin can make groups of CSS declarations that you want to reuse the site. You can also file values to make your mixin more flexible. It saves a lot of time and helps developers to code is not redundant and organized nicely.
I recommend you use the compass as they have many built-in mixins that simplify developers work.
1. Vendor Prefixing
Source: Useful Sass (SCSS) mixin Snippets
@mixin css3($ property, $ value) {
@each $ prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$ prefix}#{$ property}: $ value;
}
}
Usage:
.border_radius {
@include css3(transition, 0.5s);
}
2. Responsive Breakpoints
Source: Handy Sass Mixins
@mixin breakpoint($ point) {
@if $ point == large {
@media (min-width: 64.375em) { @content; }
}
@else if $ point == medium {
@media (min-width: 50em) { @content; }
}
@else if $ point == small {
@media (min-width: 37.5em) { @content; }
}
}
Usage:
.page-wrap {
width: 75%;
@include breakpoint(large) { width: 60%; }
@include breakpoint(medium) { width: 80%; }
@include breakpoint(small) { width: 95%; }
}
3. Retina Images
Source: Easy retina-ready images using SCSS
@mixin image-2x($ image, $ width, $ height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */
background-image: url($ image);
background-size: $ width $ height;
}
}
Usage:
div.logo {
background: url("logo.png") no-repeat;
@include image-2x("logo2x.png", 100px, 25px);
}
4. Clearfix
Source: A new micro clearfix hack
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
Usage:
.article {
@include clearfix();
}
5. Black & White
Source: Useful SASS Mixins
@function black($ opacity){
@return rgba(0,0,0,$ opacity)
}
@function white($ opacity){
@return rgba(255,255,255,$ opacity)
}
Usage:
.my-class{
background:black(0.15);
color:white(0.9);
}
6. Emboss & Letterpress
Source: Useful SASS Mixins
@mixin box-emboss($ opacity, $ opacity2){
box-shadow:white($ opacity) 0 1px 0, inset black($ opacity2) 0 1px 0;
}
Usage:
.box{
@include box-emboss(0.8, 0.05);
}
7. Opacity
Source: Handy Sass Mixins
@mixin opacity($ opacity) {
opacity: $ opacity;
$ opacity-ie: $ opacity * 100;
filter: alpha(opacity=$ opacity-ie); //IE8
}
Usage:
.article-heading {
@include opacity(0.8);
}
8. Absolute Positioned
Source: Handy Sass Mixins
@mixin abs-pos ($ top: auto, $ right: auto, $ bottom: auto, $ left: auto) {
top: $ top;
right: $ right;
bottom: $ bottom;
left: $ left;
position: absolute;
}
Usage:
.abs {
@include abs-pos(10px, 10px, 5px, 15px);
}
9. Line Height
Source: Handy Sass Mixins
@mixin line-height($ heightValue: 12 ){
line-height: $ heightValue + px; //fallback for old browsers
line-height: (0.125 * $ heightValue) + rem;
}
Usage:
body {
@include line-height (16);
}
10. Animated Image Caption
Source: 4 useful SASS mixins
@mixin animated-caption($ font-color, $ bg-color, $ bg-opacity, $ padding, $ transition-speed) {
display:inline-block;
position:relative;
overflow:hidden;
& img
{
display:block;
width:100%;
height:auto;
}
& span.outer
{
display:block;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:$ padding;
color:$ font-color;
position:absolute;
bottom:-100px;
-webkit-transition: bottom $ transition-speed ease;
-moz-transition: bottom $ transition-speed ease;
-o-transition: bottom $ transition-speed ease;
-ms-transition: bottom $ transition-speed ease;
transition: bottom $ transition-speed ease;
& span.inner
{
margin:0px;
position:relative;
}
&:before
{
content: " ";
display:block;
position:absolute;
z-index:0;
left:0px;
top:0px;
width:100%;
height:100%;
background:$ bg-color;
filter: alpha(opactiy=($ bg-opacity * 100));
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$ bg-opacity * 100})";
-moz-opacity: $ bg-opacity;
-khtml-opacity: $ bg-opacity;
opacity: $ bg-opacity;
}
}
&:hover span.outer
{
bottom:0px;
}
}
Usage:
a
{
@include animated-caption(#ffffff, #333333, 0.75, 10px, 0.5s)
}