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 Sass Basics Add Reusable Logic to Your Sass Storing Values in Maps

Kate C
Kate C
13,589 Points
Posted by Kate C
Kate C
13,589 Points

How to decide which key('sm' , 'med' or... )as another local variable to @mixin mq($break)?

why Guil decide to use $sm as another variable instead of, for example, $med?

  $med: map-get($breakpoints, 'med'); 
  @if $value < 'med' {
    @media(max-width: $value){
    @content
    }

I've tried to change variable to $med, the page seems the same.

Is there any reasons for the decision? Does setting $sm easier to divide breakpoints in the conditional statement?

the related media query sass from the video:

$breakpoints: (   
  'xs': 575px,
  'sm': 576px,
  'med': 768px,
  'lg': 992px,
);

@mixin mq($break){
  $value: map-get($breakpoints, $break);
  $sm: map-get($breakpoints, 'sm'); 
  @if $value < 'sm' {
    @media(max-width: $value){
    @content
    }
   }
  @else {
    @media(min-width: $value){
    @content
    }
   }

Thanks in advance.

1 Answer

Clinton Hays
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points

Hi Kate,

I'm not sure if you've gotten an answer to your question yet, but the reason 'sm' is used in the original @if directive is because there is only one breakpoint smaller than 'sm' and that's 'xs'. If you replace 'sm' with 'med' your @if directive will apply the @content to screen sizes at the 'sm' or 'xs' breakpoints and you may want it to only apply to 'xs'. That's where the @else directive comes in. We want it to catch anything that gets past the first directive. You only want your original @if directive to apply to one true statement. If you change it to @if $value < $lg, it will catch 'xs', 'sm', & 'med'. It's best to have your initial directive apply to only one condition and then use @else if and @else to take care of the rest.

I hope this helps! Happy coding!