3 Useful SCSS Mixins for Everyday Front-End Development Work
By Mike McRoy, Applications Engineer
SCSS mixins are a very powerful tool for a front-end developer. They enable a developer to create a valuable block of code that can be reused many times across many projects. Not only can SCSS mixins save time, but they can also save effort since they can do calculations for you.
Three great examples of some mixins that can help a front-end developer on a daily basis are:
- Row Machine
- SVG Background Image
- Simple Font Size Calculator
Row Machine
Here’s a quick and easy way to make a row of grids that are responsive and 100% fluid.
@mixin rowMachine($numPerRow, $margin) {
width: ((100% – (($numPerRow – 1) * $margin)) / $numPerRow);
&:nth-child(n) {
margin-bottom: $margin;
margin-right: $margin;
}
&:nth-child(#{$numPerRow}n) {
margin-right: 0;
margin-bottom: 0;
}
}
Usage: “@include rowMachine(4,2%);”
Add “float:left;” to the grid item container.
The end result is a grid with rows of 4 and a 2% margin between each item. This is a great and simple way to display galleries or content boxes quickly and efficiently with very little effort and the final presentation is great.
SVG Background Image
Use this method for a simple way to save time when inserting a lot of background images.
@mixin background-image($name, $size:false, $position:false){
background: url(../images/svg-icons/#{$name}.svg) no-repeat;
@if($size){
background-size: $size;
}
@if($position){
background-position: $position;
}
.no-svg &{
background-image: url(../images/#{$name}.png});
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
background-image: url(../images/#{$name}.png);
}
}
}
Usage: “@include background-image(“<image name>”);”
The function also provides a fallback if the SVG cannot be used by specific web browsers. This again saves a lot of time by not having to either manually typing everything all out or copy and pasting the data over and over. The outcome is a lot simpler process and nicer looking end result on the developer’s end.
Font Size Calculator
This calculator is meant for REM font sizes and helps eliminate the need to remember the font size in REM or set various variables for them.
@function font-size($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
Usage: “font-size: font-size(12px);”
The compiled CSS output by this mixin would then be “font-size: 0.75rem”
Closing Thoughts
These are only just a few examples of how helpful mixins can be for developers. I urge other front-end developers to explore their potential for speeding up your work flow.
Want to use your development skills to create world class eCommerce sites? Check out our job openings here!
Mike McRoy is an Applications Engineer on the LYONSCG eCommerce Implementation team, and has been working with Demandware since November 2014. Mike is a certified Demandware Developer and started his career in web development in 2003 launching a local freight truck hardware distributor site.
