- 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
Debugging Sass with Sourcemaps
3:08Sass creates a sourcemap to help you see the original Sass/SCSS source while debugging in the browser. Sourcemaps contain information that links each line of your output CSS to the Sass/SCSS source, right down to the partial file and line of code.
Debugging compiled CSS using the browser's
developer tools can be frustrating and
0:00
time consuming because of the differences
with the SCSS or Sass source code.
0:05
For example, say you need to inspect
a card div to track down a styling bug
0:10
selecting a card displays only
the compiled CSS in the styles panel.
0:16
Well let's say you pinpointed the bug and
you're ready to fix it.
0:22
Well your Sass code is usually
spread out over many partials.
0:24
And if you're new to this project or
it's been a while since you made
0:29
edits to the site finding
the source code can be tricky.
0:32
So Sass creates a source map to
help you see the original Sass or
0:35
SCSS source while
debugging in the browser.
0:39
The source map itself is
the style.css.map file
0:42
created when compiling your Sass to CSS.
0:47
It contains information that links
each line of your output CSS
0:50
to the SCSS source, right down to
the partial file in line of code.
0:54
Now, the comment you
see at the very bottom
0:58
of your output CSS is what
points to the source map.
1:01
The source map regenerates every time
you save changes in your Sass files.
1:05
To take advantage of source maps,
1:09
you'll need to enable the source maps
feature in your developer tool settings.
1:11
Chrome, Firefox and
Safari all have support for source maps.
1:15
But I'm going to use Chrome dev tools.
1:19
I've also posted instructions on
enabling source maps in Firefox and
1:21
Safari in the teacher's notes.
1:24
So to enable source maps in Chrome,
first open the Chrome developer tools.
1:26
Then click to open the customize and
control menu in the top right corner and
1:34
click Settings.
1:39
This brings you to the Preferences tab.
1:41
Then under sources,
check enable CSS source maps.
1:45
Click the Close icon to close
the settings window and
1:52
now you're all set to use source maps.
1:54
So let's try it.
1:56
When you inspect an element
here in the elements panel,
1:57
the styles panel displays the SCSS source
file and line number of each rule set.
2:02
The best part when you
click on a file name
2:09
it navigates you to the sources panel.
2:11
Or you can view the code you really
care about, the precompiled Sass.
2:14
So here we're looking at the scss
source for the card component.
2:20
With source maps you avoid the hassle of
switching between your text editor and
2:25
developer tools when debugging.
2:30
In the teacher's notes, I've posted
resources that will teach you how to
2:31
edit and save Sass changes in your project
from your dev tools using source maps.
2:35
I've also posted links
to Treehouse videos and
2:40
resources that will help
you go forward with Sass.
2:41
I hope you had fun learning the basic of
Sass and that you'll take what you've
2:45
learned in this course to extend
the block project even further.
2:48
Use the knowledge you've gain to
build your own projects using Sass.
2:52
And consider converting your existing
projects from plain CSS to Sass.
2:55
Remember, we're always here to help.
2:59
So if you have any questions about Sass,
3:00
feel free to reach out to the Treehouse
staff or other students in the community.
3:02
Thanks everyone and happy coding.
3:05