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 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
seal-mask
.a{fill-rule:evenodd;}techdegree
David Shulkin
Front End Web Development Techdegree Student 7,933 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.

and

$break == 'xs'

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