Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
27,930 Points

Sass Mixin For Media Query not spitting out code into css?

Hi everyone :),

Im just working on taking the Typographic Site made in the Web Typography course from vanilla CSS to Sass.

In a number of the rules there are one line media queries needed so rather than 3 lines of code like this:

body {
    color: $body-font-color;
    background: $body-background-color;
    @media screen and (min-width: 64em) {
        property: value;
    }
}

I thought a mixin would tidy it up a little and get me some practice in along the way.

This is my mixin as of now with vars I want to use:

// Vars
$max  : "max-width";
$min   : "min-width";

// A Quick One Line Media Query Option For One Prop and Val
@mixin media($max-min, $width, $prop, $val) {
    @media screen and ( #{$max-min}: $width) {
        $prop: $val;
    }   
}

When I include the mixin in a rule(on codepen), then click to view the compiled version the media query I would expect to see is not there however no Sass Errors.....

This is the rule I had it included in...

body { 
    @include padMarg(0,0);
    @include fontSizeLineHeight(1.25em, 1.6);
    @include media( $max, 64em, font-size, 1.125em);
    font-family: $font-sans;
    color: $base-navy; 
    background: $base-white;
}

Any advice will be extremely appreciated as this has puzzled me for a while now :)

Craig :)

1 Answer

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

You just need to interpolate the $prop variable:

@mixin media($max-min, $width, $prop, $val) {
    @media screen and ( #{$max-min}: $width) {
       // Here 
       #{$prop}: $val;
    }   
}
Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

You could also do something like this, to avoid setting max and min variables, as well as spitting out an error code if you don't use an appropriate value:

@mixin media($max-min, $width, $prop, $val) {
  @if ($max-min == max) {
    @media screen and (max-width: $width) {
        #{$prop}: $val;
    }
  }
  @else if ($max-min == min){
      @media screen and (min-width: $width) {
        #{$prop}: $val;
      }
    } 
  @else {
    @error "#{$max-min} isn't a valid choice for the first parameter of the media mixin. Please enter max or min."
  }
}

http://codepen.io/anon/pen/BNVMKw

Craig Watson
Craig Watson
27,930 Points

Thanks you Colin that has worked a charm :)

I do feel the second option is more user friendly so I will go with that, if you don't mind, what is the reason for having to use interpolation on the $prop variable ?

Thanks Craig

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Honestly? Trial and error, haha. Just went to sassmeister and messed around with it until it worked. I wish I could give you a more technical answer.

I'm pretty sure variable properties always need to be interpolated within mixins &/or functions, but I'm not positive on that.

Craig Watson
Craig Watson
27,930 Points

Well you cant say fairer than that :), I have since had a little scan over this article which seems to point out the error of my ways link there is some useful info on there :)

Craig