- Creating Powerful Mixins 4:30
- Smarter Mixins with null and Keyword Arguments 8:17
- Advanced Mixins Challenge 4 objectives
- Add Conditional Logic to Your Stylesheets 8:11
- Storing Values in Maps 7:37
- Write Loops with @for 6:24
- Loop Through Lists with @each 4:25
- Loop Through Data in a Map with @each 6:18
- Maps and Loops Review 5 questions
- Handling Errors with @error and @warn 3:51
- Debugging Sass with Sourcemaps 3:08
- Debugging Review 5 questions
Preview
Video Player
00:00
00:00
Add Conditional Logic to Your Stylesheets
8:11You'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. Conditionals in Sass output blocks of styles only under certain conditions.
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