A simple SASS media mixin

This is a robust, maintainable and scalable SASS media mixin that I have developed, that you can drop in to your scss files and then easily customise.

Add your own breakpoint values to the map at the top and then use anywhere in your code. Alter the breakpoints on a whim and watch the changes happen instantly on recompiling the SCSS.

Basic usage

See the Pen CSS media mixin by webteamDCC (@webteamDCC) on CodePen.0

You don’t need to worry about adding ‘screen’ to the media query as this is added by default but can be customised.

If you do want to see this being used with a different device type (print, tv, braile etc.), screen orientation or additional custom bug fix breakpoints, then see the below for some advanced usage example.

Advanced usage

See the Pen Advanced useage of SASS media mixin by webteamDCC (@webteamDCC) on CodePen.0

Liam Maclachlan

Working at DCC since late 2015. Developing WordPress themes, and plugins for the front and backend

More Posts - Website

Follow Me:
TwitterLinkedIn

Be the first to Comment

Your email address will not be published. Required fields are marked *

Comments are held for moderation. House rules