2.2 Switching From LESS to Sass

Hi folks. In this lesson we can learn a little bit more about how the Grunt Asset Pipeline works in Sails by switching out the default LESS preprocessor for SASS. We can also install the Bourbon and Neat SASS frameworks to help with the layout and styling for our example app. So first of all we need to install a SASS compiler. I like to use the Grunt SASS plugin for this. So make sure the command line is running in the root of our app and let's install grunt-sass. And optionally we can go ahead and uninstall the grunt-contrib-less plugin which by default our Sails app is using. Great, so now what we need to do is to add the configuration for compiling the SASS. Sails makes sure that Grunt loads all of the task configurations and definitions that are placed in the tasks/config and tasks/register folders. This means that we need to add the config and registration for the new SASS plugin. Let's start with the config. Let's go to a text editor now. And in the task/config folder, let's add a new file called sass.js. So this file should be a node module. And the function will automatically get passed an instance of Grunt. So first of all, we can use the set method of Grunt's config API to set the configuration. We provide a name for the configuration, and an object which we'll use to specify the actual configuration. So we can enable the source back option using the options key. The LESS configuration defined a dev target, so we can do the same thing. We can build the list of files dynamically in the same way that the LESS config did. It can be exactly the same except for compiling the importer.scss file instead of the importer.less file. And last of all in this file, we just need to load the grunt-sass plugin. And we wanna do that outside of the config. So we should also update the copy task to make sure that our base SCSS files don't get copied up to the .tmp folder. So let's open up the copy.js file in tasks/config and we just wanna change where it says less to scss. So this should be all the configuration that we'll need. Now we just need to add the registration for SASS. So we can do this just by editing a couple of files in the register folder. So first of all, let's open up the compileAssets.js file. And where it says less, we just wanna change that to sass, which is the name of the task that we just added. And now let's do the same in the syncAssets file. Great, so we should be all set now. All we need to do is convert the importer.less file into an importer.scss file. So let's open the file up and take a look. And it only contains comments to this point and we don't actually have any SCSS files to import at this point. So let's add a new SCSS file to the assets/styles folder and we can just call it styles.scss. And it's gonna create that as a CSS file so I'm just gonna change the extension manually. So let's just add some very simple example styling for now, just until we get things working correctly. Okay, I think Visual Studio is a little confused about our variable there, I'm just gonna close and reopen the file. That's better. So back in the importer.scss file, we can use the same syntax as less to import our new styles file. So we don't need to specify the file extension with SASS. The importer is a bit of a special file. This is the only file that will actually get compiled. All other files that contain our styles should be imported into this file. And the reason Sails is set up like that is so that we can control the order in which our scss files are compiled in, in order to make sure that, for example, we load our variable and mix in files before any other files that need to use them. So, let's go back to the command line and let's lift our app again. And it should start without any errors. Let's visit the URL. And we see that our lovely hot pink background is being applied. So we know that the importer is working and that the SASS is being compiled as it should be. Fantastic. And let's just take a look at our site in Windows Explorer. And if we just go into the .tmp director and into the styles folder. Then we see that our importer.scss file has been included in there and there's a map file in there are well just to make debugging easier. Great, so let's go back and remove the hot pink background now before our eyes melt. We can just leave this file empty for now. So lastly for today let's just get Bourbon and Neat installed and configured. We go back to the command line for this, and we'll need to stop the development web server. So we do that with Ctrl+C. And now it's just install node-bourbon and node-neat. So now we just need to tell Grunt to include these two frameworks when it compiles our SCSS files. So let's go back to Visual Studio now. And we want to go back into the sass.js task that we added earlier on. And in the options section, just after the sourceMap, we just need to tell Grunt about Neat. And we need to do that using the includePaths option, and in here we just want to require node-neat and use its includePaths method. So Neat will include automatically Bourbon for us. So we just need to require in the node-neat module. We should also import the frameworks into the importer.scss file before the styles import. So nothing is actually gonna happen at this point, because we aren't using anything from these frameworks yet. So just as a test, let's make use of Neat to add a simple layout element to our index page. So let's go back to the index.html file. And let's just wrap our heading in a section. So we give this section a class name of container. So now back in our styles.scss file, we can use Neat's outer container mixing. So let's go back to the command line now so we can relift our app. And it looks like we've got a Grunt error. And it looks like the clean task has failed because .tmp/public is not empty. Well, we're not expecting that to be empty, and that's kind of the point of the clean task is to make that folder empty. Now I have noticed issues like this on Windows occasionally with the clean task on other projects, so let's just try lifting again and see if the problem goes away. Okay, that seems much better. So let's go back to the app now and nothing much looks different but let's just inspect the source. And we can see that our container has a bunch of styles which we didn't add ourselves, so we know that this must be coming from Neat. Awesome, so we've used three different things in this lesson that you may or may not have used or heard of before. One of those things is SASS. Now I would hope that you heard of SASS before even if you've never used it. But just in case you haven't you can take a look at the SASS website and that is sass-lang.com. Lots of information there about why SASS is awesome. So if you don't know much about it, have a quick read through that. And also we use Bourbon which is a mix in library for SASS. You may or may not have used or heard of that before, if not again, just take a look at the website. It's at Bourbon.io, there's lots of goodness there. And also Neat is a framework for Bourbon and that gives us a responsive gridlike framework and you can take a look at the docs for that also. All three of these things are incredible and I use them all time. So in this lesson, we saw how easy it is to customize the default Grunt pipeline that ships with Sails. As we saw, once the required Node module is installed and the configuration and registration is added, any plugins that we want to use should just work. Thanks for watching.