I'll show you something fun that you may not know about. Did you know that in Chrome DevTools, you can modify even your SASS files and immediately see the browser update in real time? Let me show you. php artisan new DevTools lesson. Okay, let's switch into that. And then next I will do npm install, which will set up Gulp and Laravel Elixir for us. Sweet. So we've installed the framework, we've pulled in our dependencies. Next, let's go ahead and do a gulp watch.

So we've installed the framework, we've pulled in our dependencies. Next, let's go ahead and do a gulp watch. And then in a new tab, I will run php artisan serve. There we go. All right, so check this out. If we go to our gulpfile.js, yeah, out of the box, it's compiling down app.scss. So if I switch to that, and let's just say body color is red for the time being. And that should compile down behind the scenes. All right, final step. We've compiled it down.

All right, final step. We've compiled it down. Let's just import it. And we'll do it in our welcome view here. So css app.css. And we can even swap all of this out with h1 Laravel 5. Okay, cool. So let's go back to Chrome, give it a refresh. That's what we expect. But now what if we want to modify this, but we need to tinker around with it in the browser.

That's what we expect. But now what if we want to modify this, but we need to tinker around with it in the browser first. This is incredibly common, you'll do it all the time. So I will hit command option I, and let's track this down. And let's go to the body. Okay, so yes, we can see the colors red. But here's what I want you to notice right here. Because you're using Laravel Elixir, behind the scenes, it automatically takes care of source mapping for you.

Because you're using Laravel Elixir, behind the scenes, it automatically takes care of source mapping for you. So you don't have to do anything. So that means this should say app.scss for you if you're working along. Now real quick, if that does not show up, go to your settings. And under the sources tab, make sure that all of these are checked. Okay, anyways, if I were to click on this, or I could also command click on one of the properties, it's going to take me right to that file. But here's the thing, it's a sass file. So it's not going to work right out of the box.

All right, so this is pretty cool. Now, if I change some colors, save it, it will be persisted, it will compile down, and then the page will automatically refresh. Let's prove it. We go back to our file system, and there you go. Or if we go to the terminal, I'm going to hit Command K to clear the screen. Let's do another one. color is red, save. If I go back to the terminal, that picks up on the file change, it compiles it down, and then next, because we created a mapping between the app.css URL and the underlying file, it

If I go back to the terminal, that picks up on the file change, it compiles it down, and then next, because we created a mapping between the app.css URL and the underlying file, it will automatically update without us refreshing the page. Now let's do this. Let's do Command P and go to our welcome file. And unfortunately, you can't save the file here and have it refresh, and that's because the page, once again, is serving a compiled PHP file, not the Blade file itself. But because we do have our workspace set up, that is reflected in our project. I'll show you. I just changed that to Laravel 4.

I'll show you. I just changed that to Laravel 4. We can see that here. Okay, so that means when you do need to update your Blade file, if you want to do it in the browser, yeah, just make your change and then hit update. Three plus two, save, Command R, and we can see it there. That's at least an option. But anyways, why don't we create a heading here and we'll say, welcome to Laracasts, and I'll give it a class of heading, and then maybe an option here, fancy. Some people like to do heading and then heading--fancy.

and I'll give it a class of heading, and then maybe an option here, fancy. Some people like to do heading and then heading dash dash fancy. Honestly, that's what I typically do, but I've been sort of toying around with this approach as well, almost like command line options. Pretty cool. Anyways, that's another lesson. So we have a new class. I'm going to close this out, and we'll say heading. Let's do a color of black by default. Save it.

Let's do a color of black by default. Save it. And then we'll say if it has a class of fancy, well, in that case, the background color should be blue and the color should be white. Save it. That compiles down and it gets updated here. Display inline-block, and then padding all around of 10 pixels. All right, next, let's do this. body and html should have a height of 100%. And then we'll say the body, we'll use Flexbox here.

Body and HTML should have a height of 100%. And then we'll say the body, we'll use Flexbox here. Display is flex, and then align items vertically to the center, and then justify the content, the H1 in this case, to the center as well. All right, save it, and that should now be vertically centered. Okay, but now what if we decide this should be placed within a heading partial? All right, fair enough. Let's do that, and then we'll say at the top include heading. And then right here, I can add a file directly from the browser. heading.scss, and I will paste that in.

And then right here, I can add a file directly from the browser. Heading.scss, and I will paste that in. Save it. Once again, this is all being updated in our project, and it's automatically being compiled down. But now, oh, whoops, looks like I made a mistake, ah, sorry, I got delayed on the mind. Not include import. Anyways, save it, it compiles down properly, and that means it'll update in the browser. Okay, so now we have this partial we can work with. Color of red, font family is sans-serif, you get the basic idea. Now remember, the important thing is if I refresh the page, every change I made in the