1
00:00:00,000 --> 00:00:04,408
[MUSIC]

2
00:00:04,408 --> 00:00:09,180
Nobody's workflow is perfect, and we don't
always write perfect code from the start.

3
00:00:09,180 --> 00:00:12,018
So, getting used to working with Sass will
take a little time.

4
00:00:12,018 --> 00:00:16,480
And as you'll soon see, you're still gonna
experience a few bumps along the way.

5
00:00:16,480 --> 00:00:19,940
So we're gonna take a look at some of the
common issues I've come across

6
00:00:19,940 --> 00:00:23,870
when using Sass features like variables,
mixins, extends, and more.

7
00:00:23,870 --> 00:00:27,097
Hopefully, it'll help alleviate some of
those bumps I mentioned.

8
00:00:27,097 --> 00:00:30,084
We'll also go over some best practices for
writing Sass and

9
00:00:30,084 --> 00:00:32,603
how to inspect and debug Sass code in the
browser.

10
00:00:32,603 --> 00:00:35,920
Then we'll get our shiny new Sass website
all ready for production.

11
00:00:35,920 --> 00:00:37,074
Let's get to it.

12
00:00:37,074 --> 00:00:40,107
>> What's helpful about Sass is that if we
make a mistake,

13
00:00:40,107 --> 00:00:45,010
Sass will tell us what we're doing wrong
and where the problem exists in our code.

14
00:00:45,010 --> 00:00:50,110
So in our latest workspace, let's first
run a Sass watch by going

15
00:00:50,110 --> 00:00:57,990
down to the console and typing sass
--watch scss:css.

16
00:00:57,990 --> 00:01:00,350
So now if we preview and

17
00:01:00,350 --> 00:01:03,940
refresh our website, we see that we're
getting an error.

18
00:01:03,940 --> 00:01:08,940
And the error tells us that there's an
undefined variable in our project, and

19
00:01:08,940 --> 00:01:13,040
it's happening in our containers.scss
partial.

20
00:01:13,040 --> 00:01:15,420
And if we take a look at our workspace
console,

21
00:01:15,420 --> 00:01:20,070
we can see how it's throwing the same
error in the command line output.

22
00:01:20,070 --> 00:01:24,022
So it looks like it's just a typo in our
variable name.

23
00:01:24,022 --> 00:01:29,431
So now to fix this, we can go straight to
our containers partial and

24
00:01:29,431 --> 00:01:31,564
scroll down to line 15.

25
00:01:31,564 --> 00:01:36,037
And sure enough, there's the border-light
variable, which actually needs to be

26
00:01:36,037 --> 00:01:39,890
color-border-light, so let's go ahead and
change that real quick.

27
00:01:42,470 --> 00:01:46,560
So now when we save our partial, it looks
like it was fixed, but

28
00:01:46,560 --> 00:01:49,450
now we're getting another error saying
there's

29
00:01:49,450 --> 00:01:54,630
an undefined mixin on line three of our
typography partial.

30
00:01:54,630 --> 00:01:56,570
So let's go back to that.

31
00:01:56,570 --> 00:02:02,220
Let's open up the components directory and
open up the typography partial.

32
00:02:02,220 --> 00:02:05,062
And yep, it looks like we need to fix our
mixin name.

33
00:02:05,062 --> 00:02:10,868
So instead of fontface, one word, we need
to define it as font-face.

34
00:02:10,868 --> 00:02:13,660
All right.
So let's go ahead and save and compile.

35
00:02:13,660 --> 00:02:17,370
And once we refresh, it looks like
everything is back to normal.

36
00:02:17,370 --> 00:02:17,870
Great.

37
00:02:19,350 --> 00:02:25,610
So anytime we see an undefined variable or
mixin error in our Sass, chances are that

38
00:02:25,610 --> 00:02:29,950
we typed it incorrectly or accidentally
omitted it from our style sheet.

39
00:02:29,950 --> 00:02:36,160
So next, let's take a look at issues that
can happen when interpolating variables.

40
00:02:36,160 --> 00:02:38,890
So, as we learned earlier, we sometimes
need to

41
00:02:38,890 --> 00:02:43,650
use interpolation syntax to pass variables
and selectors and property names.

42
00:02:43,650 --> 00:02:45,660
This way, we're able to generate selectors
and

43
00:02:45,660 --> 00:02:48,780
property names dynamically, which is
useful when writing mixins.

44
00:02:48,780 --> 00:02:52,050
So let's take a look at possible issues we
may encounter

45
00:02:52,050 --> 00:02:53,950
if we forget to interpolate our variables.

46
00:02:53,950 --> 00:02:59,470
So, over in the layout directory, let's
open up our header partial,

47
00:02:59,470 --> 00:03:04,900
and say we forget to interpolate the image
path variable in our background values.

48
00:03:04,900 --> 00:03:08,690
So I'll go ahead and delete the hash and
curly braces.

49
00:03:10,380 --> 00:03:12,390
Then save.

50
00:03:12,390 --> 00:03:16,010
Well, as we can see, this won't actually
return an error,

51
00:03:16,010 --> 00:03:18,600
so we might think everything's okay

52
00:03:18,600 --> 00:03:22,880
until we realize that our main header's
background image is missing.

53
00:03:22,880 --> 00:03:28,610
Well, since we didn't interpolate the
variable, it literally returns the text

54
00:03:28,610 --> 00:03:34,270
path imagein the image path, as we can see
here in the CSS output.

55
00:03:34,270 --> 00:03:38,640
So that's why in this case, since the
variables value is a string,

56
00:03:38,640 --> 00:03:42,590
we'll need to escape our variable using
interpolation syntax.

57
00:03:42,590 --> 00:03:45,880
And the same thing would also happen with
our font paths, so

58
00:03:45,880 --> 00:03:46,920
let's keep that in mind.

59
00:03:46,920 --> 00:03:51,410
So I'll just go ahead and undo that,
refresh, and once again,

60
00:03:51,410 --> 00:03:54,040
we have our main header background image
in our design.

61
00:03:54,040 --> 00:03:56,650
But say we also forget to interpolate

62
00:03:56,650 --> 00:04:00,500
the brk-narrow variable here in our media
query.

63
00:04:00,500 --> 00:04:04,710
So let's remove the hash and curly braces
around our variable.

64
00:04:05,760 --> 00:04:08,080
And when we compile our Sass and

65
00:04:08,080 --> 00:04:13,180
refresh our design, well, this time we get
an invalid CSS error.

66
00:04:13,180 --> 00:04:17,320
Well that's because Sass is expecting a
valid media query

67
00:04:17,320 --> 00:04:19,470
after the @media directive.

68
00:04:19,470 --> 00:04:24,260
In this case, if our variable comes right
after the @media directive,

69
00:04:24,260 --> 00:04:26,670
which it does, we'll need to interpolate
it.

70
00:04:26,670 --> 00:04:30,950
So once again, let's undo it to add the
interpolation syntax back in.

71
00:04:30,950 --> 00:04:32,410
We'll save.

72
00:04:32,410 --> 00:04:34,950
And now everything's back to normal.

73
00:04:34,950 --> 00:04:38,710
So next, one of the biggest issues we may
encounter while working with

74
00:04:38,710 --> 00:04:43,460
the Sass placeholders and the extend
directive is the lack of support for

75
00:04:43,460 --> 00:04:45,960
extending from within a media query.

76
00:04:45,960 --> 00:04:49,160
Unfortunately, Sass doesn't allow
extending placeholders

77
00:04:49,160 --> 00:04:50,560
across media queries.

78
00:04:50,560 --> 00:04:55,120
So for example, say we wanted to extend
the t-border

79
00:04:55,120 --> 00:04:58,800
placeholder inside our main header media
query here.

80
00:04:58,800 --> 00:05:03,680
So let's type @extend and

81
00:05:04,770 --> 00:05:08,900
then we're going to extend the t-border
placeholder.

82
00:05:08,900 --> 00:05:14,700
So now when we save and compile our Sass
and refresh the page, we get the error,

83
00:05:14,700 --> 00:05:20,090
You may not @extend an outer selector from
within @media.

84
00:05:20,090 --> 00:05:25,540
And then it says that you may only extend
selectors within the same directive.

85
00:05:25,540 --> 00:05:29,730
Well, the reason Sass doesn't let us do
this is because basically,

86
00:05:29,730 --> 00:05:33,170
we're trying to extend a rule that's from
another scope.

87
00:05:33,170 --> 00:05:38,330
In our case, the t-border placeholder is
scoped to the root of the CSS.

88
00:05:38,330 --> 00:05:39,850
Now, there are some workarounds for

89
00:05:39,850 --> 00:05:43,170
this, but they're still considered hacks
at this point.

90
00:05:43,170 --> 00:05:46,000
But the good news is that cross-scope
extends

91
00:05:46,000 --> 00:05:49,360
is one of the most wanted features from
the Sass community, so

92
00:05:49,360 --> 00:05:53,030
hopefully it's a feature that will soon be
available to us.

93
00:05:53,030 --> 00:05:57,250
Finally, as I mentioned in the previous
stage, the order of our partial

94
00:05:57,250 --> 00:06:01,520
import is important because it has
cascading effects on the output.

95
00:06:01,520 --> 00:06:04,773
So, for instance, if we open up the base
directory and

96
00:06:04,773 --> 00:06:06,838
the index partial inside of that.

97
00:06:06,838 --> 00:06:10,607
Now, if we were to import the variables
partials last.

98
00:06:10,607 --> 00:06:15,880
So, for instance, I will cut it and paste
it as the last import.

99
00:06:15,880 --> 00:06:19,324
Once we save and compile our Sass and
refresh our design,

100
00:06:19,324 --> 00:06:23,989
we're going to get a bunch of undefined
variable errors since some of our base

101
00:06:23,989 --> 00:06:27,758
styles are referencing variables and they
can't find them.

102
00:06:27,758 --> 00:06:31,404
Now, the same would happen if we were to
import

103
00:06:31,404 --> 00:06:35,999
the mixins partial after any rules that
depend on a mixin.

104
00:06:35,999 --> 00:06:38,135
[BLANK_AUDIO]

105
00:06:38,135 --> 00:06:45,370
So, any variables, mixins or base styles
should be imported first, never last.

106
00:06:45,370 --> 00:06:47,584
Typically, when writing a Sass rule,

107
00:06:47,584 --> 00:06:50,874
it's good practice to [SOUND] extend
placeholders first,

108
00:06:50,874 --> 00:06:55,051
[SOUND] then include mixins, [SOUND] then
add the rest of the declarations.

109
00:06:55,051 --> 00:07:00,040
This may help avoid specificity or cascade
issues in our CSS output.

110
00:07:00,040 --> 00:07:04,590
So next, we'll cover how to debug our Sass
code in the browser with source maps.