7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Working With CSS

If you’re working in front-end development, you’re definitely using CSS. But what if you’re using Sass? Let’s begin.

2.3 Working With CSS

Hello and welcome to lesson number five. Now if you're doing front end development, then you're definitely working with CSS but CSS is pretty straightforward, right? What if you want to work with preprocessors and that means Sass, LESS, and all the others. Or things get a little bit more complicated here because working with a preprocessor means having a compiler for that to transform it from the Sass syntax, for example, to vanilla CSS. Well, there are a few apps you can use for that, for example, LiveReload. Actually LiveReload, I don't think it does Sass. I think it only compiles CSS, but don't quote me on that. CodeKit compiles a bunch of preprocessors and there are a few more apps, but if you want to do that from the command line, that's also very easy. Grunt has a few plugins for that. So if we take a look at a couple of these. If you go to gruntjs.com plugins. And you search for Sass, you get this plugin, sass, and you get this one contrib-sass. Now contrib-sass or any kind of plugin that is prefixed with contrib- is made by the Grunt team, you can think about these as the official plugins. Anything else is made by third party, but that doesn't mean they're bad or anything. In fact in the case of the Sass plugin this one here by Sindre Sorhus, I hope I pronounced that correctly. This one is actually better than the one by made by the Grunt team. Because this one is faster than the other one because it uses libsass. The Sass compiler in C++, it says so right here. And I've been using this. I like it, it's totally adequate for what we want to do. So let's go ahead and install grunt-sass. I'm going to open my terminal here, I'm going to say MPM install grunt-sass, save that again to save it as a dependency. And while that's happening, let's go and load that plugin and I'll say Sass grunt-sass here. And just bear with me. We would need to install another plugin that's called Watch. So I'm going to say grunt [LAUGH] sorry, mpm install grunt-contrib this time, so this is like an official plugin made by the Grunt team. So grunt-contrib-watch watch again save as a dependency, and let's load that as well. grunt-contrib-watch, there we go. Great, now what can we do with these? Well before we do anything, we need to create the task here. So we're gonna say sass and we're gonna create a target called dev, because as I was saying in our previous lesson we have two parts to our workflow, a dev and a built part. So right now we're gonna create a dev part. And we're gonna set some options. Now the Sass plugin will basically compile Sass into CSS, and we can specify how it's going to do that. So we're gonna set the output style to expanded and we're going to set sourceMap to false. And then we're going to specify which files should be compiled from Sass or from SCSS to CSS. So first of all, we're going to specify the destination. In our case it's gonna be the styles.css file in the css folder. So we're gonna, say paths.app_css/styles.css. And the source for this file will be paths.source_scss will define this in just a little bit, /app.scss. So let's go ahead and define this right here. We'll say source_scss. We're gonna set the paths.app /src/scss. So we're pointing to this folder right here. Now let's go ahead and create a new file here called app.scss. And let's try it out. So in app.scss let's write some code here. Oops, what am I doing? Body, let's do color: red;. And let's also do a test class here color. So this should compile to body color red and then another selector body with a class of text color black. So now we can simply do grunt and we can call the name of the task, which in our case is sass right here. And this should take the app CSS. It should use these options and compile it into styles.css. So let's hit Enter, see if that works and said running sass done. And now we have the styles.css file. And as I was saying this is the result. So our task works perfectly. Now we need to run this task whenever we change the app.scss file, and this is where the watch task comes in handy, or the watch plugin, whatever you wanna call it. So the watch plugin works the following way. We're gonna put it right here, after browserSync, this is important. So we're gonna say watch and we're gonna say sass, and we're gonna specify the files that need to be watched. In my case it's gonna be paths.source_scss / all the files with the extension scss from all the sub folders, and then we can specify tasks. And this is very cool, because we can specify multiple tasks. In my case I just wanna say sass:dev. So this is how it works. Whenever we change a file from this location the sass:dev task will be executed. And in order to make this work, we need to go into our browserSync options. And we need to set watchTask to true. And that will enable us to work with browserSync and watch at the same time. So now let's go ahead and open our server here. And apparently, we were unable to connect, okay. Why is that happening? Let's see. So serving files from: app, localhost :3000. Okay, watchTask: true. So paths.app. I think we have a little error here, because source.scss is not defined. Yes, it is actually, okay. So what is going on, why are we having this error? Sorry, I forgot to add the watch task here. So we can actually put this in an array. And say this, when we do grunt, do browserSync, but also do the watch task, right? So it's clear disclosed to grunt again and now it works. Okay, so we have our page here. Now if I go into app.scss and change something here. For example, let's make this blue. I hit Save and notice that the SCSS app has changed. The sass:dev task was run. It's done and it also tells me when it was completed and also that file that was changed is styles.css. So now if we take a look, we can see that the file was compiled correctly and our browser was reloaded. Perfect. All right. We are now have a system for working with Sass file compiling them into CSS and doing browser reloading at the same time. Great, now let's move on to working with JavaScript files. That's coming up.

Back to the top