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 trialMark Figueroa
Front End Web Development Techdegree Student 8,074 PointsGeneral help understanding how the condition works
If I understand this correctly (not at all sure if I do), if the breakpoints/break value is smaller than the 'sm' value, then the 'if' declaration will find that smaller value, in this case the 'xs' value and then set said smaller value as the max-width... (?)
But, if the value is not smaller than 'sm', then the 'else' will identify the width and insert the appropriate breakpoint... (?)
2 Answers
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 PointsHi Mark,
It seems like you have the conditional logic down. The first @if statement says that if the $value is less than our 'sm' breakpoint, which we have set to the variable $sm, then that $value will be used as the max-width for the media query. If we hard code in some values it may help make things a little more clear:
@mixin mq(575px){
$value: map-get($breakpoints: 575px);
$sm : map-get($breakpoints: 576px);
@if 575px < 576px{
@media(max-width: 575px)
}
}
//In this scenario the code stops running here since the condition was met
@mixin mq(768px){
$value: map-get($breakpoints: 768px);
$sm : map-get($breakpoints: 576px);
@if 768px < 576px{
// @media(max-width: $value) this code doesn't run since the condition was false
}
@else {
@media (min-width: 768px)
}
}
//In this scenario, since the @if conditional was false, the code proceeds to the @else
//conditional where the $value variable is used as the min-width.
Remember that all the information the conditional has is what we are passing to it. We've already set the $breakpoints as a map. So, the @else conditional isn't so much inserting the appropriate breakpoint as it is inserting the breakpoint that we told it to evaluate.
I hope this makes sense...conditional logic is tricky at times. I'm still learning and it jams me up quite a lot. It's taken me about 15 minutes to even type up this response because I kept getting hung up on different points. Anyway, if I've steered you wrong, please let me know, but otherwise, happy coding!
Yoke Lee
2,871 PointsI am confused with the question. >.>
So let's say sm = 768px, and xs = 320px,
max-width: @sm
means any value less than or equals to 768px (that includes xs / 320px)
min-width: @sm
means any value greater than or equals to 768px
through my experience though, 767px frequently act like a dead pixel that did not put any rules into account, so i normally put the rules as max-width: 767.98px.