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

Posted by nfs
nfs
35,526 Points

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

Thanks in advance

3 Answers

jlampstack
jlampstack
23,932 Points

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 10,255 Points
David Shulkin
.a{fill-rule:evenodd;}techdegree
David Shulkin
Front End Web Development Techdegree Student 10,255 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?

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

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

rasil
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
rasil
Front End Web Development Techdegree Graduate 15,053 Points
rasil
.a{fill-rule:evenodd;}techdegree seal-36
rasil
Front End Web Development Techdegree Graduate 15,053 Points

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  
}