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!

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 Add Conditional Logic to Your Stylesheets

I don't understand how those four sets fo conditionals work... Any elaboration? or Resource? or Documentation for me?

Thanks in advance

3 Answers

Hi @Nafis,

I see that you took javascript. It works pretty much the same as an if / else statement in javascript. Just the syntax is slightly different.

It's basically creating a media query with one parameter that runs when the parameter $break is true. It will run only for the first true condition that is met.

For example,

@If $break == 'xs' {
    // run this block of code here

In the above example, the block of code that would run would is ...

    @media (max-width: $break-xs) {     // $break-xs is a variable we defined earlier
        @content;          // not sure if Guil defined it yet, or if he will in a later video
     }                     //@content lets us add to the block of code.

In the above example, I created only one @if for simplicity. If the @if condition isn't met, the program would loop to the next if condition, which is @else if. In my example, I never used an @else if, but that is what it would do if there were more conditions.

The program exits as soon as the first condition is met. If no conditions are met, the program exits without running any of the conditions.

Hope this helps!

PS. Guil added a link in the teacher's resources of this video.

David Shulkin
David Shulkin
Front End Web Development Techdegree Student 9,972 Points

I see that $break has to equal "xs" for it to output the extra small media query. My question is, what is 'xs' equal to in the this example? It wasn't defined as a variable

neither is $break defined with a value. So how can $break equal xs?

Hey, thanks for the effort @jaycode. Could mark it as best answer but loved it really.

David Shulkin , The if directive is inside the mixin with the parameter $break.

@mixin qt($break) {
    @if $break == 'xs' {                       
          //Output this

The $break parameter receives it's value when you include the mixin 'qt' inside a css rule with an argument.


$break == 'xs'

.selector {
    @include qt(xs);    //xs is the value we provide as an argument for the $break parameter