Throughout this course, you've seen how Sass introduces many of the core features

of programming into your CSS workflow.

Conditionals are no exception.

In programming, conditional statements let you control the flow or

behavior of your program.

You run different pieces of code based on conditions in your program.

Although not a programming language, you already write conditionals in plain CSS.

For example, a media query targets a range of viewport sizes and

devices only if the media query expression is true.

Conditionals in Sass output blocks of styles only under certain conditions.

A conditional always begins with the if directive

followed by an expression that gets evaluated as either true or false.

If the condition is true,

the code block following the expression gets processed and compiled to CSS.

If false, it returns nothing.

A conditional statement can be as simple as, if this is true, then do that.

For example, in the base.scss partial,

I'll add two conditionals inside the body rule.

The first condition tells Sass, if 1 > 100,

set the background-color to green.

The second will say, if 1+1 is equal to 2,

make the background red.

Saving and compiling these changes, displays the body background as red and

that's correct.

Since 1 is not greater than 100, the first block of code doesn't run.

Sass then moves on to evaluate the next condition 1 + 1 is equal to 2.

So the second block of code runs and sets the background to red.

These simple examples just show you how conditionals work.

You'd never write a conditional using hard-coded comparisons like this.

Instead, you'll often use conditionals inside mixins to make your mixins more

intelligent.

For example, using conditionals, we can create a flexible media query mixin

that outputs different code for each breakpoint.

For instance, if the breakpoint is extra small,

then the mixin writes one media query.

If it's medium, then it outputs a different media query and so on.

Currently, media queries are one of the biggest

code duplication offenders in our project.

Even though we're using variables for the breakpoint values, we're still

repeating many of the same media features like max-width and min-width.

So we're going to store our media query expressions and rules inside a mixin.

Then leverage the powers of conditionals to output a media query based on

the argument passed to the mixin.

So let's open up the mixins partial located inside the utilities directory.

And at the bottom of the file, I'll add a comment for media queries.

Then I'll create a new mixin named mq which stands for media query.

The mixin will accept one parameter, a breakpoint variable named break.

Now our layout consists of media query breakpoints for extra small,

small, medium, and large viewport sizes.

So inside the mixin, we'll create a condition for each breakpoint.

The first condition will be for a media query targeting extra small devices.

So we'll write @if $break is equal to extra small,

run the code block inside the curly braces.

Then inside the curly braces, add the media query for extra small devices, say,

@media.

Max-width and the value $break-xs.

And in the media query rule,

we'll use the splendid content directive you learned earlier.

To pass blocks of styles to the media query from the mixin include.

So at this condition, evaluates the false.

Sass can evaluate additional conditions like a second,

third or fourth condition until one returns true.

If none of the conditions are true, then Sass won't output CSS for this mixin.

To add more conditions, we use the else directive to extend an if statement.

So let's add a second condition that will output a media query for

small breakpoints.

So right below the if condition,

we'll type @else if $break == 'sm' or small.

Run the code inside these curly braces.

Then inside this condition, I'll include the media query for the small breakpoint.

So I'll go ahead and copy the media query above.

Paste that inside here, and change max-width to min-width, and

$break-xs to $break-s, the name of the variable for our small breakpoint.

An if statement can be followed by several else if statements, like this one.

So now let's write else if conditions for the medium and large breakpoints.

So simply copy and and paste the else if we just wrote.

Paste it below and change the variables and values.

So for this one, the expression will be if $break ==.

Medium or med.

And then the media expression will change the value to $break-m.

Then right below we'll add a final one that says,

@else if $break is equal to large.

And we'll set the media expression to $break-l.

So now our media query mixin is built to perform certain actions

based on the break argument.

It will output a media query if the break argument matches one of these strings.

So if the argument doesn't match the if statement, it will evaluate to false.

Then the else if statements are evaluated in order

until one successfully matches the argument passed in.

Now if no if or else blocks match, the mixin outputs nothing.

All right, so let's try out the mixin over in the components images partial.

We'll replace the media directive and

expression inside the image featured rule with @include mq.

And the mixin accepts one of four arguments, extra small, small,

medium or large.

So we'll pass it xs to output a media query for

our extra small breakpoint range.

And you can also pass the argument as a string.

Next, over in the layout containers partial,

let's replace the Main content rules media query directive with @include mq.

Passing it the argument.

Medium, or 'med', to output a media query for the medium breakpoint.

I'll do one more then let you swap out the rest.

In the same file, let's replace the Intro rules media query with include mq.

Passing it the argument large.

All right, so it looks like our media queries are still in place.

The difference is that our SCSS is now smarter, leaner, and less repetitive.

We can configure all media queries in one place instead of having to search for

them in our partials.