Preview

Start a free Courses trial
to watch this video

Debugging Errors in Sass

Name: Debugging Errors in Sass
Uploaded: 2015-03-30T16:08:49Z
Duration: 424 s
Description: In this video, we'll look at common errors that may happen when using Sass features like variables, mixins, and extends. We'll also go over some best practices for writing Sass.

7:04 with Guil Hernandez

In this video, we'll look at common errors that may happen when using Sass features like variables, mixins, and extends. We'll also go over some best practices for writing Sass.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

Nobody's workflow is perfect, and we don't always write perfect code from the start. 0:04

So, getting used to working with Sass will take a little time. 0:09

And as you'll soon see, you're still gonna experience a few bumps along the way. 0:12

So we're gonna take a look at some of the common issues I've come across 0:16

when using Sass features like variables, mixins, extends, and more. 0:19

Hopefully, it'll help alleviate some of those bumps I mentioned. 0:23

We'll also go over some best practices for writing Sass and 0:27

how to inspect and debug Sass code in the browser. 0:30

Then we'll get our shiny new Sass website all ready for production. 0:32

Let's get to it. 0:35

>> What's helpful about Sass is that if we make a mistake, 0:37

Sass will tell us what we're doing wrong and where the problem exists in our code. 0:40

So in our latest workspace, let's first run a Sass watch by going 0:45

down to the console and typing sass --watch scss:css. 0:50

So now if we preview and 0:57

refresh our website, we see that we're getting an error. 1:00

And the error tells us that there's an undefined variable in our project, and 1:03

it's happening in our containers.scss partial. 1:08

And if we take a look at our workspace console, 1:13

we can see how it's throwing the same error in the command line output. 1:15

So it looks like it's just a typo in our variable name. 1:20

So now to fix this, we can go straight to our containers partial and 1:24

scroll down to line 15. 1:29

And sure enough, there's the border-light variable, which actually needs to be 1:31

color-border-light, so let's go ahead and change that real quick. 1:36

So now when we save our partial, it looks like it was fixed, but 1:42

now we're getting another error saying there's 1:46

an undefined mixin on line three of our typography partial. 1:49

So let's go back to that. 1:54

Let's open up the components directory and open up the typography partial. 1:56

And yep, it looks like we need to fix our mixin name. 2:02

So instead of fontface, one word, we need to define it as font-face. 2:05

All right. So let's go ahead and save and compile. 2:10

And once we refresh, it looks like everything is back to normal. 2:13

Great. 2:17

So anytime we see an undefined variable or mixin error in our Sass, chances are that 2:19

we typed it incorrectly or accidentally omitted it from our style sheet. 2:25

So next, let's take a look at issues that can happen when interpolating variables. 2:29

So, as we learned earlier, we sometimes need to 2:36

use interpolation syntax to pass variables and selectors and property names. 2:38

This way, we're able to generate selectors and 2:43

property names dynamically, which is useful when writing mixins. 2:45

So let's take a look at possible issues we may encounter 2:48

if we forget to interpolate our variables. 2:52

So, over in the layout directory, let's open up our header partial, 2:53

and say we forget to interpolate the image path variable in our background values. 2:59

So I'll go ahead and delete the hash and curly braces. 3:04

Then save. 3:10

Well, as we can see, this won't actually return an error, 3:12

so we might think everything's okay 3:16

until we realize that our main header's background image is missing. 3:18

Well, since we didn't interpolate the variable, it literally returns the text 3:22

path imagein the image path, as we can see here in the CSS output. 3:28

So that's why in this case, since the variables value is a string, 3:34

we'll need to escape our variable using interpolation syntax. 3:38

And the same thing would also happen with our font paths, so 3:42

let's keep that in mind. 3:45

So I'll just go ahead and undo that, refresh, and once again, 3:46

we have our main header background image in our design. 3:51

But say we also forget to interpolate 3:54

the brk-narrow variable here in our media query. 3:56

So let's remove the hash and curly braces around our variable. 4:00

And when we compile our Sass and 4:05

refresh our design, well, this time we get an invalid CSS error. 4:08

Well that's because Sass is expecting a valid media query 4:13

after the @media directive. 4:17

In this case, if our variable comes right after the @media directive, 4:19

which it does, we'll need to interpolate it. 4:24

So once again, let's undo it to add the interpolation syntax back in. 4:26

We'll save. 4:30

And now everything's back to normal. 4:32

So next, one of the biggest issues we may encounter while working with 4:34

the Sass placeholders and the extend directive is the lack of support for 4:38

extending from within a media query. 4:43

Unfortunately, Sass doesn't allow extending placeholders 4:45

across media queries. 4:49

So for example, say we wanted to extend the t-border 4:50

placeholder inside our main header media query here. 4:55

So let's type @extend and 4:58

then we're going to extend the t-border placeholder. 5:04

So now when we save and compile our Sass and refresh the page, we get the error, 5:08

You may not @extend an outer selector from within @media. 5:14

And then it says that you may only extend selectors within the same directive. 5:20

Well, the reason Sass doesn't let us do this is because basically, 5:25

we're trying to extend a rule that's from another scope. 5:29

In our case, the t-border placeholder is scoped to the root of the CSS. 5:33

Now, there are some workarounds for 5:38

this, but they're still considered hacks at this point. 5:39

But the good news is that cross-scope extends 5:43

is one of the most wanted features from the Sass community, so 5:46

hopefully it's a feature that will soon be available to us. 5:49

Finally, as I mentioned in the previous stage, the order of our partial 5:53

import is important because it has cascading effects on the output. 5:57

So, for instance, if we open up the base directory and 6:01

the index partial inside of that. 6:04

Now, if we were to import the variables partials last. 6:06

So, for instance, I will cut it and paste it as the last import. 6:10

Once we save and compile our Sass and refresh our design, 6:15

we're going to get a bunch of undefined variable errors since some of our base 6:19

styles are referencing variables and they can't find them. 6:23

Now, the same would happen if we were to import 6:27

the mixins partial after any rules that depend on a mixin. 6:31

[BLANK_AUDIO] 6:35

So, any variables, mixins or base styles should be imported first, never last. 6:38

Typically, when writing a Sass rule, 6:45

it's good practice to [SOUND] extend placeholders first, 6:47

[SOUND] then include mixins, [SOUND] then add the rest of the declarations. 6:50

This may help avoid specificity or cascade issues in our CSS output. 6:55

So next, we'll cover how to debug our Sass code in the browser with source maps. 7:00

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

CSS to Sass

Debugging Errors in Sass

Related Videos

Related Discussions

Related Discussions