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

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points
Posted by Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points

1 + 1 == 2? What does the 1 represent

This might be a stupid question, but I don't understand when Guil types 1 + 1 == 2 or 1 > 100. Do the numbers refer to the body selector? As in if there is more than one body selector? Even reading the Sass Reference I don't understand what the numbers are representing, a selector?

1 Answer

Dave Harker
PLUS
Dave Harker
Courses Plus Student 15,510 Points
Dave Harker
Dave Harker
Courses Plus Student 15,510 Points

Hi Samantha Atkinson,

He is just demonstrating condition evaluations ... they will evaluate to either true or false. And the styling in there will be run based on that outcome. So in the example he uses the background-color: green; will never get applied as 1 is not greater than 100 ... whereas the background-color: red; will always be applied as 1+1 is equal to 2.

The conditions he is using you wouldn't actually use (he is just providing conditions that absolutely return either true or false), but instead you would use something related to the page you're writing it for ... similar to how the @media queries in standard css work. e.g if (the page width is wider than x pixels) { style something } (returns true or false when evaluating, just like his conditionals) then apply some style.

Hope that helps,
Dave

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points

Thanks, Dave, haha I over complicated the reason for the numbers and didn't take them at face value as a simple demo of conditions evaluating to true or false. Thanks for quick response, now I can move on.