blog logo
[ultimatesocial count="true" networks="linkedin,facebook,twitter" url="" skin="minimal"]

3 Useful SCSS Mixins for Everyday Front-End Development Work

Mary Clare Riordan • November 5, 2015

By Mike McRoy, Applications Engineer

web developer

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;


                                background-size: $size;



                                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.

Mary Clare Riordan

About the author

Mary Clare Riordan

Mary Clare Riordan is the Marketing Programs Manager at LYONSCG. When she's not running creative demand generation campaigns, you can find her cheering on Boston sports and Marquette basketball, running along the Chicago lakefront, or spending time with family and friends.

Subscribe to our blog

Let's discuss the next step in your commerce journey.

XSchedule a meeting