Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Compile Sass to CSS

Sass is extremely popular these days, and I'd certainly choose it over regular CSS any day of the week. Therefore, it's common to need to compile Sass files into CSS that can be understood by the browser. In this lesson we'll see exactly how to do that.

3.1 Compile Sass to CSS

Hi folks, in this lesson, we're gonna take a look at how we can compile SASS files down into regular CSS ready for deployment. This is a pretty common requirement. We don't have any SASS files in the project at the moment. So first of all, I'm just going to add a new folder in the src folder called SASS. And inside this folder, let's add a new file called styles.scss. So we don't need much SASS, just enough to test that everything is hooked up correctly. So let's just add a couple of variables, and then use these variables in some SASS. So now let's get the plugins that we want to use installed. We'll need the Gulp SASS plugin and we can add the Gulp source maps plugin as well. Great, so once the plugins are installed we can add the configuration for the task. So we'll add a new file to the Gulp_tasks directory as we have before and we'll call this one Sass.js. So we'll start out by requiring the packages that we'll need. And now we'll need to export a value from this module in the same way that we have before. And the format is gonna be quite similar to previous tasks. So, once again, we first need to collect the source files that we want to operate on. In this case, this would be any .scss file inside the sass folder. And next we'll want to pipe these to the gulp-sass module. And because we're generating new files here, we also need to specify where we'd like these files saved. And we do that using the gulp dest method as we did in the previous lesson. And we can put these into a directory inside the CSS folder called built. And we don't need to specify the individual filename because the Sass plugin will generate CSS files for each scss file that it reads in and they will have the same names. So, there's still a couple of things we need to do before we can run our new task. First of all, let's see what happens if there's an error in one of our Sass files. And let's just add an unknown variable in there somewhere. So now we can run the task. And we can see that it reports the error for us, it's telling us there's an undefined variable. No new files have been generated at this point. So what this means is that if there's an error in any of our input scss files, the whole task will come crashing to a halt. So let's add an error handler for error events. And we need to do this before we write the destination fabs We chain the on method to the code to the gulp sass package. The handler for an error event is the plugin's logError method. So that's what we need to do. So let's just try running that once again. So, we see the error as we did before, but this time the task finishes successfully. So, if we're running other tasks of this one, the whole process won't come to a stop. So, we still don't have any CSS files generated. Let's just go back to the SAAS file and get rid of the error. And this time we do have a CSS folder, and inside we have a built folder, and inside we have a styles.css file and that contains our compiled CSS. Okay, so we installed the Gulp source maps package at the start of the lesson. We just need to require it in now. And first of all we need to initialize the source maps before we start compiling the SaaS. We can do that using the init method. And now after we've generated the CSS, but before we write to the destination, we can create the source map file. So we can write the source map using the write method of the source maps module and what that will do is write the source map into the string and that then gets piped to the gulp.dest method. And the source map will get written at the same time as the CSS file. So let's just run the task again to test it's working. And it's not yet working because we haven't told the source maps plug in where we'd like the new file to be written. So we just need to pass an argument into the write method here. And what we're saying is just put it in the same directory that the CSS file gets written to. And this time we have our map file. So there's just one more thing I want to do today. As we're creating new files now, we should make sure that any generated files that were created previously get removed or cleaned from the system before the new files are written. For that we can use the gulp-clean package. Let's just install it quickly. And let's add a new file to the gulp_tasks directory for this And inside we just need to load Gulp and the clean package. So the files that we want to remove are the src files for this task. And we're saying that we want to clean the built directory inside the CSS directory. So gulp would automatically read all of the files that match the pattern path to src, just in case you needed to pipe them to another task as a stream. But because we're just gonna delete these files we don't necessarily want to actually read them. And to make sure that the files don't get read, we just need to add a configuration objects to the src method. And inside this configuration objects we can set the read property to false. And we just need to pipe the source files now to the clean module. So let's now run the clean task. And we find that it has removed the built directory from the CSS directory. If we had other files inside the CSS directory, they would still be read. So in this lesson we saw how to add a task to Gulp that compiles our SASS files into CSS that can be used by a browser. We also saw how to generate source maps with the gulp-sourcemaps tool. And how to remove the compiled files before they get regenerated using the gulp-clean package. In the next lesson, we'll see how we can compile TypeScript down into JavaScript. Thanks for watching.

Back to the top