FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 How to Compile Sass or LESS Files

In this lesson you’re going to learn how to compile preprocessor files and integrate this process into our workflow.

Related Links

3.1 How to Compile Sass or LESS Files

Hello and welcome back to this course. In this lesson, you are going to learn how to compile Sass or LESS files and also how to integrate this process in our workflow. Now, in our source folder, we have an scss folder, which contains a bunch of SCSS files. We have a partial called settings with just some Sass variables. And a styles.scss, which imports those settings and also sets its own styles. Now, to a browser, a Sass file or an SCSS or a LESS file is not worth anything, really, because the browser cannot interpret that code. It needs CSS code. So what we need to do is get this code and compile it into vanilla CSS code that can be interpreted by the browser. To do that, we're gonna use a Gulp or an npm module called gulp-sass. So if we do a search for sass on npm, we're gonna find a bunch of plugins, 4007 to be exact, but we need one for Gulp. So I'm gonna say sass gulp, and we find this one. It's called gulp-sass. Now this is exactly the one that we're going to use. And on the npm page, you'll find information about it, instructions on how to install it. So actually, let's go ahead and copy that. And it also gives you a basic usage of the plugin, also specifies a bunch of options here. So let's start there. Let's go ahead and install that plugin. And once that is installed, we have to load it in our Gulp file. So I'm gonna load it as sass require gulp-sass. And then I'm gonna create the Gulp task. So I'm gonna say, compiles Sass to CSS. Now, before we get this underway, just a quick note. If you're using LESS, no problem whatsoever. There is also a gulp-less plugin. You'll find this also on npm. Simply replace the gulp-sass plugin with the gulp-less. It does exactly the same thing. You'll also see the basic usage right here. So gulp.task, I'm also gonna call this sass. It doesn't matter if it's the same name as the plugin. And I'm gonna declare a function. Now, inside, I'm gonna start with this, return gulp. And then we're gonna start by getting all of the SCSS files. And those are found in src/scss. I'm gonna say all of the subfolders in scss, and then all of the files with the extension of scss. Now we're gonna pipe these through the sass plugin, which you call like this. And then you pipe that data stream again through gulp.dest, and I wanna put them inside the css folder under dest. Okay, so let's give this a go, let's, Let's try gulp sass. Now that executed the sass task. It compiled my styles.scss file into styles.css. So we went from this, To this, and this is now compatible with the browser. It can be interpreted by the browser. Now, if you don't like the output mode here, the sass plugin has a bunch of options, which you can see in the npm page. But one that's probably gonna be used a lot, and you would specify those options using a JavaScript object, is outputStyle. Look, the editor also gives us all the necessary information here. outputStyle, I'm gonna set it to expanded. So now if we run this again, my CSS file will look different. And it can also export as compressed if that's what you want, and, As you'll see, the CSS will be exported in minified format. But personally for development, I like the expanded mode. So that's exactly what I'm gonna use right here. Now, what about watching these Sass files for changes? Well, that's super easy to do. We're gonna add a watch in here in the server task. We're gonna say I'm gonna watch for src, scss, all the subfolders and all the files with the extension of scss. That includes the partials, of course. And we're gonna execute the sass function. Now, because we're using Browsersync, Browsersync has a special feature that allows it to reload right here on the sass task. All we gotta do is simply pipe that data stream through And essentially, that will do browser reloading for us. Now, inside our main task, we're gonna change things up a little bit here. Yeah, we're gonna start with the html task, then the sass task, and finally, the server. Now, one thing to mention here is that Gulp runs tasks in parallel. So these task will be run in parallel. But what we're saying here really is when we're running the default task, we run html, sass and server. So let's see what's happening. Let's do gulp. Now this opened a server on localhost 1234. It's serving, index.html from the distribution folder. But also, what it did was it started html, it started sass and it started server, right? And if you look at the timestamp, it started these three at the same time, server finished first, then html was finished second, and finally, sass was finished third. But now, because I'm running the server task, and I'm watching the files for changes, I can simply change one of the SCSS files. For example, let's change something in settings. Let's set the body-color to black instead, right? And if we save, you can see Injected: styles.css. The CSS file was injected instead of reloading the whole page. So this change happened almost instantly. Maybe change the link-color to orange. Yeah, and that changes the link-color to orange. It's really, really fast. Maybe change some style here in styles.css. Well, let's change text-decoration to underline. That also changes automatically in the browser. Super simple and super helpful at the same time. Now, a very helpful tool that's available as a Gulp plugin is the CSS autoprefixer. We'll cover that in the next lesson.

Back to the top