Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics Add Reusable Logic to Your Sass Storing Values in Maps

Kate C
Kate C
13,588 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

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!