SASS extends within media queries

20th January, 2015


Those of you who use the SASS pre-processor to assist in writing your CSS will be familiar with its %placeholders and @extends — ‘repeatables’ that you can drop into your CSS code as needed, keeping everything nice and consistent. You may also have run across that bothersome business where you have all your carefully-crafted placeholders in your base CSS file, and when you come to use them inside a media query SASS throws an error. It’s no fun, is it? No. It’s not. You can make those placeholders into Mixins instead, but being a good little SASS/CSS ninja you know that Placeholders give you tighter, more efficient code. So, what to do? Should you make mixin duplicates of all your placeholders? That doesn’t seem very DRY.

Hugo Giraudel to the rescue, with a solution that lets you just have one code block for each ‘repeatable’. You place each one using mixin syntax but it will be used as if it were a placeholder — unless you tell it not to, which is accomplished by adding a single, simple parameter. Nice. For the full details, read Hugo’s article Getting the most out of SASS placeholders.

Filed in…


Selected work

Latest blog entries


Monthly archives

Copyright © 1999-2017 Shark Attack. All rights reserved.