1
00:00:00,580 --> 00:00:05,650
Debugging compiled CSS using the browser's
developer tools can be frustrating and

2
00:00:05,650 --> 00:00:10,400
time consuming because of the differences
with the SCSS or Sass source code.

3
00:00:10,400 --> 00:00:16,990
For example, say you need to inspect
a card div to track down a styling bug

4
00:00:16,990 --> 00:00:22,070
selecting a card displays only
the compiled CSS in the styles panel.

5
00:00:22,070 --> 00:00:24,998
Well let's say you pinpointed the bug and
you're ready to fix it.

6
00:00:24,998 --> 00:00:29,310
Well your Sass code is usually
spread out over many partials.

7
00:00:29,310 --> 00:00:32,060
And if you're new to this project or
it's been a while since you made

8
00:00:32,060 --> 00:00:35,740
edits to the site finding
the source code can be tricky.

9
00:00:35,740 --> 00:00:39,640
So Sass creates a source map to
help you see the original Sass or

10
00:00:39,640 --> 00:00:42,720
SCSS source while
debugging in the browser.

11
00:00:42,720 --> 00:00:47,820
The source map itself is
the style.css.map file

12
00:00:47,820 --> 00:00:50,770
created when compiling your Sass to CSS.

13
00:00:50,770 --> 00:00:54,540
It contains information that links
each line of your output CSS

14
00:00:54,540 --> 00:00:58,590
to the SCSS source, right down to
the partial file in line of code.

15
00:00:58,590 --> 00:01:01,640
Now, the comment you
see at the very bottom

16
00:01:01,640 --> 00:01:05,260
of your output CSS is what
points to the source map.

17
00:01:05,260 --> 00:01:09,580
The source map regenerates every time
you save changes in your Sass files.

18
00:01:09,580 --> 00:01:11,670
To take advantage of source maps,

19
00:01:11,670 --> 00:01:15,770
you'll need to enable the source maps
feature in your developer tool settings.

20
00:01:15,770 --> 00:01:19,320
Chrome, Firefox and
Safari all have support for source maps.

21
00:01:19,320 --> 00:01:21,350
But I'm going to use Chrome dev tools.

22
00:01:21,350 --> 00:01:24,700
I've also posted instructions on
enabling source maps in Firefox and

23
00:01:24,700 --> 00:01:26,360
Safari in the teacher's notes.

24
00:01:26,360 --> 00:01:31,138
So to enable source maps in Chrome,
first open the Chrome developer tools.

25
00:01:34,618 --> 00:01:39,426
Then click to open the customize and
control menu in the top right corner and

26
00:01:39,426 --> 00:01:40,580
click Settings.

27
00:01:41,920 --> 00:01:43,980
This brings you to the Preferences tab.

28
00:01:45,060 --> 00:01:52,720
Then under sources,
check enable CSS source maps.

29
00:01:52,720 --> 00:01:54,810
Click the Close icon to close
the settings window and

30
00:01:54,810 --> 00:01:56,660
now you're all set to use source maps.

31
00:01:56,660 --> 00:01:57,830
So let's try it.

32
00:01:57,830 --> 00:02:02,930
When you inspect an element
here in the elements panel,

33
00:02:02,930 --> 00:02:07,940
the styles panel displays the SCSS source
file and line number of each rule set.

34
00:02:09,030 --> 00:02:11,800
The best part when you
click on a file name

35
00:02:11,800 --> 00:02:14,310
it navigates you to the sources panel.

36
00:02:14,310 --> 00:02:18,588
Or you can view the code you really
care about, the precompiled Sass.

37
00:02:20,915 --> 00:02:25,970
So here we're looking at the scss
source for the card component.

38
00:02:25,970 --> 00:02:30,030
With source maps you avoid the hassle of
switching between your text editor and

39
00:02:30,030 --> 00:02:31,900
developer tools when debugging.

40
00:02:31,900 --> 00:02:35,270
In the teacher's notes, I've posted
resources that will teach you how to

41
00:02:35,270 --> 00:02:40,040
edit and save Sass changes in your project
from your dev tools using source maps.

42
00:02:40,040 --> 00:02:41,960
I've also posted links
to Treehouse videos and

43
00:02:41,960 --> 00:02:44,350
resources that will help
you go forward with Sass.

44
00:02:45,665 --> 00:02:48,995
I hope you had fun learning the basic of
Sass and that you'll take what you've

45
00:02:48,995 --> 00:02:52,245
learned in this course to extend
the block project even further.

46
00:02:52,245 --> 00:02:55,125
Use the knowledge you've gain to
build your own projects using Sass.

47
00:02:55,125 --> 00:02:59,445
And consider converting your existing
projects from plain CSS to Sass.

48
00:02:59,445 --> 00:03:00,955
Remember, we're always here to help.

49
00:03:00,955 --> 00:03:02,555
So if you have any questions about Sass,

50
00:03:02,555 --> 00:03:05,975
feel free to reach out to the Treehouse
staff or other students in the community.

51
00:03:05,975 --> 00:03:07,335
Thanks everyone and happy coding.