Add Conditional Logic to Your Stylesheets

Throughout this course, you've seen how Sass introduces many of the core features 0:00 of programming into your CSS workflow. 0:04 Conditionals are no exception. 0:06 In programming, conditional statements let you control the flow or 0:08 behavior of your program. 0:12 You run different pieces of code based on conditions in your program. 0:13 Although not a programming language, you already write conditionals in plain CSS. 0:17 For example, a media query targets a range of viewport sizes and 0:22 devices only if the media query expression is true. 0:25 Conditionals in Sass output blocks of styles only under certain conditions. 0:29 A conditional always begins with the if directive 0:34 followed by an expression that gets evaluated as either true or false. 0:37 If the condition is true, 0:41 the code block following the expression gets processed and compiled to CSS. 0:42 If false, it returns nothing. 0:47 A conditional statement can be as simple as, if this is true, then do that. 0:49 For example, in the base.scss partial, 0:54 I'll add two conditionals inside the body rule. 0:58 The first condition tells Sass, if 1 > 100, 1:03 set the background-color to green. 1:08 The second will say, if 1+1 is equal to 2, 1:19 make the background red. 1:24 Saving and compiling these changes, displays the body background as red and 1:34 that's correct. 1:38 Since 1 is not greater than 100, the first block of code doesn't run. 1:40 Sass then moves on to evaluate the next condition 1 + 1 is equal to 2. 1:47 So the second block of code runs and sets the background to red. 1:52 These simple examples just show you how conditionals work. 1:59 You'd never write a conditional using hard-coded comparisons like this. 2:03 Instead, you'll often use conditionals inside mixins to make your mixins more 2:07 intelligent. 2:11 For example, using conditionals, we can create a flexible media query mixin 2:14 that outputs different code for each breakpoint. 2:18 For instance, if the breakpoint is extra small, 2:20 then the mixin writes one media query. 2:23 If it's medium, then it outputs a different media query and so on. 2:25 Currently, media queries are one of the biggest 2:27 code duplication offenders in our project. 2:30 Even though we're using variables for the breakpoint values, we're still 2:32 repeating many of the same media features like max-width and min-width. 2:37 So we're going to store our media query expressions and rules inside a mixin. 2:41 Then leverage the powers of conditionals to output a media query based on 2:46 the argument passed to the mixin. 2:50 So let's open up the mixins partial located inside the utilities directory. 2:52 And at the bottom of the file, I'll add a comment for media queries. 2:57 Then I'll create a new mixin named mq which stands for media query. 3:03 The mixin will accept one parameter, a breakpoint variable named break. 3:09 Now our layout consists of media query breakpoints for extra small, 3:17 small, medium, and large viewport sizes. 3:22 So inside the mixin, we'll create a condition for each breakpoint. 3:26 The first condition will be for a media query targeting extra small devices. 3:31 So we'll write @if $break is equal to extra small, 3:36 run the code block inside the curly braces. 3:42 Then inside the curly braces, add the media query for extra small devices, say, 3:50 @media. 3:55 Max-width and the value $break-xs. 3:58 And in the media query rule, 4:10 we'll use the splendid content directive you learned earlier. 4:11 To pass blocks of styles to the media query from the mixin include. 4:16 So at this condition, evaluates the false. 4:21 Sass can evaluate additional conditions like a second, 4:25 third or fourth condition until one returns true. 4:28 If none of the conditions are true, then Sass won't output CSS for this mixin. 4:31 To add more conditions, we use the else directive to extend an if statement. 4:35 So let's add a second condition that will output a media query for 4:40 small breakpoints. 4:44 So right below the if condition, 4:45 we'll type @else if $break == 'sm' or small. 4:48 Run the code inside these curly braces. 4:55 Then inside this condition, I'll include the media query for the small breakpoint. 5:00 So I'll go ahead and copy the media query above. 5:05 Paste that inside here, and change max-width to min-width, and 5:06 $break-xs to $break-s, the name of the variable for our small breakpoint. 5:11 An if statement can be followed by several else if statements, like this one. 5:18 So now let's write else if conditions for the medium and large breakpoints. 5:23 So simply copy and and paste the else if we just wrote. 5:27 Paste it below and change the variables and values. 5:34 So for this one, the expression will be if $break ==. 5:37 Medium or med. 5:43 And then the media expression will change the value to $break-m. 5:45 Then right below we'll add a final one that says, 5:50 @else if $break is equal to large. 5:53 And we'll set the media expression to $break-l. 5:57 So now our media query mixin is built to perform certain actions 6:03 based on the break argument. 6:07 It will output a media query if the break argument matches one of these strings. 6:09 So if the argument doesn't match the if statement, it will evaluate to false. 6:14 Then the else if statements are evaluated in order 6:19 until one successfully matches the argument passed in. 6:22 Now if no if or else blocks match, the mixin outputs nothing. 6:25 All right, so let's try out the mixin over in the components images partial. 6:30 We'll replace the media directive and 6:37 expression inside the image featured rule with @include mq. 6:40 And the mixin accepts one of four arguments, extra small, small, 6:50 medium or large. 6:53 So we'll pass it xs to output a media query for 6:55 our extra small breakpoint range. 6:58 And you can also pass the argument as a string. 7:00 Next, over in the layout containers partial, 7:04 let's replace the Main content rules media query directive with @include mq. 7:08 Passing it the argument. 7:20 Medium, or 'med', to output a media query for the medium breakpoint. 7:23 I'll do one more then let you swap out the rest. 7:35 In the same file, let's replace the Intro rules media query with include mq. 7:38 Passing it the argument large. 7:47 All right, so it looks like our media queries are still in place. 7:55 The difference is that our SCSS is now smarter, leaner, and less repetitive. 7:59 We can configure all media queries in one place instead of having to search for 8:05 them in our partials. 8:09