Enhance your CSS with preprocessors

Hi, in this video we're going to look at why CSS preprocessors are awesome.

So what is a CSS preprocessor?

Now a preprocessor is a separate document that uses a language similar to CSS, but builds on it to allow us to do things that aren't available in a normal CSS Style Sheet.

The main reason we use our preprocessor is to eliminate repetition, and by doing this it speeds up our workflow.

Hurray!

So in our typical CSS we often use the same CSS properties like color and size and position over and over again.

Now, a preprocessor has lots of techniques that we can use to eliminate this repetition, and that's what we'll look at in this video.

Now, we still need our traditional CSS Sheet there's no way around that, but we'll do something before the CSS Sheet is created: we'll preprocess our CSS, hence the name.

So we're going to be working with the site in front of us here, let's go and look at how it's put together currently in Dreamweaver.

So here is the finished site, we were just looking at.

Now I'm up here in Developer mode.

I've also defined the site here in Dreamweaver to manage the files for this project.

To follow along you'll have to do the same.

You can do it up here in Site, New Site.

Now there is another tutorial video teaching you site definition if you need a bit of help with that.

And currently I'm looking at my HTML which is the Source Code here.

Let's switch to styles.css in my related documents bar.

So here's a really standard looking CSS sheet.

What we're looking for here is the use of this color white here this #fff, you can see it's used here on line 102, but also again down here on 116.

If I have it highlight here and I go to Find and I go to Find and Replace Dreamweaver tells me that there are actually a total of 12 times this is used, and that's a lot for just a really small site like this one.

And it's times like this when a preprocessor is going to be perfect for you.

So I'm going to close down this one, this one is a finished version, let's look at our start files.

So I'm going to open up rendered-index.html, and let's have a little look at it in a browser.

So you can see in this version the text is black along the top, black along the middle here and say things like the footer here is all black.

What we want to do is switch it out to white, but we're going to use some of our fun, new preprocessor tricks.

Man I find preprocessor hard to say.

Back into Dreamweaver!

So the first thing we're going to do is that we're going to create our CSS preprocessor, and what I want you to notice over here in my Files folder is that it's a pretty basic site.

There's an index page, and then there's a styles.css.

And there's some folders, but that's it.

Just these two in the root here.

Now let's go and create our CSS preprocessor and see what happens.

Just go to File, just go to New, now there's a few different options: You can pick LESS, SCSS or Sass.

Now all three of these do a similar job.

They have the same perks that we've talked about earlier, but they have a different syntax.

We're going to use the newest version, it's SCSS.

Why?

Because the language used looks most like regular CSS, so it's really familiar to web designers.

Now we're going to click Create, going to save it.

I'm going to call mine scss-styles.scss.

You can call it anything you like.

Let's hit Save.

And what you'll notice is there's my file, but it's also automatically generated this extra CSS file, and what's super cool about that, is that Dreamweaver is handling all the ground work when it comes to compiling this.

Now when I first looked at these preprocessors I understood them and I could see the value with them, but there is a lot to do to set up things, like command line compilers, and all these things I had to configure to make it work.

So it was a little bit hard, but now that it's built into Dreamweaver life is easy.

And what you can do is we've got the CSS sheet here, existing with a bunch of stuff already set to do things.

Now when you're starting a site you probably wouldn't have this CSS sheet, you just start with SCSS sheet and use this file that it produces or compiles.

But we're going to run them both together here in the interest of this tutorial.

So the first thing we're going to do is that we're going to create something called a variable.

Now, variables are easy, you create them by putting a dollar sign at the beginning, you can call them anything you like as long as you don't use spaces or any other funny characters, just stick to numbers and letters, put a colon at the end.

And we're going to load this variable with a color, in this case, it's going to be #fb00b4;.

So the syntax is quite like CSS, which makes life easy, and if you've never used a variable before, all you're doing is jamming this color code here, inside the name $primary-color.

The cool thing about using this variable here means that I get to use this variable a million times on my site, but it's controlled by just this one little lonely bit of line up here, so I can change it once, and it changes everywhere the variable has been used.

Goodbye Find and Change.

Now if you're still unsure what a variable does, let's go and use it.

It'll make more sense then.

So first of all what I want to do is what am I going to style?

I'm going to go into my HTML and I want to style all of the text that is in this class here called… Where is it?

This hero here.

All of the text in here I would like to change from black to another color that we'll set with our variable.

I'll also do the same with the footer as well.

Back into my SCSS sheet.

Let's type a period, then hero for the class, curly braces.

And what we're going to do, we'll say color, remember color by itself is the font color, then we'll add a colon.

Now I could use the Color Picker here to choose the new color, but remember our use case here, it's for times when you're having to repeat yourself over and over again.

So what we're going to do is use the variable here.

Use the dollar sign here as above, type primary-color, let's close it off with a semicolon.

So all that's happening is this variable here acts like a place holder.

Wherever the variable $primary-color is used, it gets switched out for the color code up here in my variable definition.

And that's what Dreamweaver does when it compiles it.

And now we're still looking at our SCSS sheet, let's go and look at the compiled, finished CSS, here he is there.

So what we can do is open him up and there is my CSS sheet and this is what the SCSS sheet does for us automatically.

It generates a standard CSS sheet that web browsers can use with the color code injected where the placeholder was.

Now it's this CSS sheet here that needs to go onto our page, so let's go and add it.

Let's go to our HTML, and you see here at the top, this is the existing CSS sheet that I had, so what I want to do is add my extra one as well with my cursor flashing anywhere in sight.

Here I can hit Command+D on a Mac, or CTRL+D on a PC and it duplicates it.

What I'll do is that I'll delete that one, and put in our new one here.

So there he is, there are the both of them.

There's the top one which has my original CSS sheet and now the new version which is generated by the preprocessor.

Remember this isn't the actual SCSS sheet, it's the file that Dreamweaver compiles.

It has the same name, but it has the .css extension.

Cool, let's check it in the browser.

And there he is!

The weird pink color.

So let's do the same with my footer.

The footer is black.

Let's jump into my preprocessor and let's see it all work together.

So I'm going to put in an ID for footer, and I'd like the footer, please, to be a font color, and I'm going to use my variable, I'm going to copy and paste them so I get the spelling right.

Let's check it out in the browser and he is now pink!

So let's just quickly recap what's happening: Now I'm using my SCSS sheet to generate this CSS sheet, there it is there, nice and clean with my colors in it.

And that's being used by my HTML page.

Now why do I add this extra step?

Well, it's not an extra step, Dreamweaver automatically compiles the CSS sheet for me and ties it all together with my HTML.

I'm just working with this guy, the SCSS sheet.

And why do we do it?

Because variables are awesome.

We've only got a really small example here, but let's say now we need to go and change something, and we've used this $primary-color a thousand million times for the document.

I can come up to here and then instead of trying to do Find and Change and find them all I can just tap up here.

Lovely pink color!

I want to switch it out to, say, #fff which is white, hit Save, it makes the CSS and our real time browser preview automatically updates to being white.

Not just that, also, the header on the top here as well.

So you can imagine this is just the font color, you can do it with the font family, font spacing, padding, margins, anything you like.

Turn it into a variable, use it throughout, and have one great control over the lot.

Now variables are only one of the amazing things you can do with preprocessors.

So let's look at something else called Nesting.

So Nesting is a way to match your CSS selectors with the hierarchy that you've got in your HTML.

What it means is let's jump to our HTML, so we're looking at our Source Code here.

What I want to do is start styling, say, this ul here, which is an unordered list, which is, this navigation along the top here.

And I want to do some things, I want to remove the underline, I want to make it uppercase, I want to do some fun things with it.

Back here in Dreamweaver what I need to do is I'd need to then in CSS make something called a compound selectors, so I would like to do a tags, that are inside lists, that are inside ul's, which is inside nav, which is fine, but in a preprocessor you can match this Nesting and it can make it easier for you to know what you're styling.

So let's jump into my SCSS.

What I'd like to do is style the .site-nav that was in my HTML, and that's where CSS normally stops, you can't put other classes inside of here, but with this SCSS preprocessor we can.

Inside of here I've got a ul, and I'd like this ul to have a list-style-type of… none; and that will remove any bullet points from my list.

So the next thing I'd like to do is to match the li's, like we've got back in our HTML, so we've got li's which are insides ul's, which are inside our site-nav.

So, back in here.

So here's my .site-nav, there's my ul, inside of this ul I'd like an li, which is the list item, essentially the bullets inside this unordered list.

And there's my curly braces again, and this is nesting: so li inside ul, which is inside .site-nav, I would like you to have a margin of bottom of 3.75em;.

I'm going to save it, and let's have a quick little look at what gets generated, so let's go back to rendered-index.html, let's look at the SCSS sheet we've created.

You can see what it's generating.

It's generating my first one which is my "ul " that's inside .site-nav, it's also generating though that extra one because we've nested li's inside the ul's, it's created our compound selector that has our bottom margin.

Now this is the CSS the website needs, the cool thing about it though is our SCSS sheet automatically compiles and generates it for us.

And what we get to do is we get to use the structure we've used in our HTML where we've got li's, inside of ul's which is nested inside our .site-nav.

Awesome!

Let's do a last one, jump back to our SCSS sheet.

Now we'll style the a-tag which is used to define where our menus go when they're clicked.

We only want to style a-tags that are nested inside the li's that are inside the ul's which is inside the site nav's.

Great!

So I want them inside this li, so before the closing curly bracket we're going to do a, curly brackets, we'll do a few things for this one: We'll start with font size, great, this is 1.15em, text-decoration in this case text-decoration, we're going to set to none, that'll turn off the underlines that are on by default, let's do letter spacing 0.15em's, we'll do text-transformation and that will just allow us to make all of it - force it to be uppercase.

Now we're going to do a nice bit of transition color, so we use transition and we use color, we'll get this transition for .3s.

And because this is a fancy new property we're going to have to have our webkit version, so your cursor anywhere inside, COMMAND D or CTRL D on a PC, I'm going to add the webkit browser prefix, save, and one thing to mention here is that this is our fourth level of nesting we've made.

The a is inside the li, which is inside the ul, which is inside the site nav, and that's fine, but you shouldn't really go too much past 4, it can start impacting the readability obviously and there's an impact on site speed.

Let's check it in the browser to see what's going on, so the underline is gone, it's uppercase and the line spacing is done, and one thing we haven't done is the text color.

So we want to change it out to white, so let's jump into Dreamweaver, now put in color, and the color by itself will do the font color.

Now we could put in white, but what I want to do is use our handy dandy variable that we used earlier, so instead of typing in the color we're going to type in, remember at the top here, $primary-color, type in $primary-color; hit Save, now let's check in our browser.

And hey awesome they're white!

And if we wanted to change them all back to an awful color, let's jump back into Dreamweaver, and you, lovely variable, are now going to be red, which is going to look amazing!

Okay, so not so amazing.

But: You get the idea of how easy now it is to change that one variable, that will then spill through my CSS.

Happy days!

So I'm going to switch it back to white now, magic.

Last bit of preprocessor greatness we'll look at is something called a mixin, so let's go do that.

Now what is a mixin?

A mixin is used to group a bunch of CSS properties together to make them easier to work with.

You use the mixin when you have to repeat long lists of CSS properties.

It saves you having to repeat that long list over and over, you bundle them together in a mixin, and use that simple little mixin as its replacement.

So a good example of this is the use of CSS gradients.

Now this site in front of us here, let's scroll down and look at the gradient use.

Down here on the right hand side here in the artwork description we've got a gradient, lovely gradient in the background here, if we scroll down a little further, there's another gradient and behind this artwork here, and there's the last gradient here in the footer.

So we're using gradients quite a bit through this site, and let's look at the CSS that creates these gradients.

So I'm going to jump into Dreamweaver.

So I'm in my finished example and I just want to show you, I'm looking at the HTML let's jump to the CSS, now this here at the top is the class that describes that first gradient that we saw.

And you can see here to actually describe a gradient in CSS you need to do quite a bit: you need to say that it has a background-image, it's a linear-gradient, it has an angle on it.

Okay, set in degrees and it has a beginning color and an ending color.

And that is how you describe that.

Now the problem is that this CSS property is quite new so all the different browsers don't have any consistency yet.

So what we need to do is describe it to all the different browsers and these are the main ones.

We've set it to moz for Firefox, and we describe it there.

We also do it for webkit browsers, most popular of which is Chrome and then this ms one for the Microsoft browsers.

So we need to repeat ourselves quite a bit, it's quite a bit of text, and we also have to repeat quite a lot of it down here when we talk about the second bit of gradient we saw.

And further down again in our footer.

Okay, so we're repeating this moz, webkit, Microsoft browser prefixes over and over again.

And this makes it a really good use case for our mixin.

So what I'm going to do is that I'm actually going to delete it from all of these, so I'm going to delete it from footer, so we're just going to take note when we're deleting these ones, the name of the footer because we'll reuse this later on.

So remember footer.

Let's delete this one, let's find the other one.

There it is there, and you can see this one's called .artwork-3 and then another .artwork-piece.

You just need to remember these names for later on, we're going to use them for our mixin.

Here's the last one, and this one is .artwork-1.

And then .artwork-description.

So we've removed the gradients let's look at our file.

Great so down here this white box is where the gradient was, and further down on this side here was the gradient, and our footer here all have the gradients removed.

So let's look at putting it back in with the mixin So I'm going to open up my SCSS file, and to create a mixin you start down here, we start with an @ symbol, we type in mixin, hit Space, now we get to give the mixin a name, we get to call it anything we like.

I'm going to call mine gradient, curly braces, I'm going to paste in and tap across these CSS properties, we deleted these a second ago from the CSS Sheet, and we're going to use them in here.

So we've created a mixin, we've given it a name and we've loaded it with this really long bit of CSS that makes the gradient work, now what I want to do, is I want to use it.

So now what we will do is we'll put in the class names that we took note of earlier on.

Remember, we deleted all these gradients from it.

So remember the first box was called .artwork-1, .artwork-description, curly braces, and instead of writing out that big, long gradient imagine if we could just inject that mixin, hang on, you add an @include and then you just add this name.

Dreamweaver generates the new CSS sheet, let's check it out.

So HTML, might be in the Source Code, go to our scss-styles.css, that's the one that gets created, and there it is there, it's generated this and it's switched out the @include for background-image.

Hooray!

Let's go check it in the browser, and there what was previously white has now got a gradient in the background, now let's use it again to really kind of to show the benefits of being able to reuse the mixin.

So back into Dreamweaver, let's go back to our SCSS sheet, now remember we took note of the next box that we deleted the gradient from, and that was called .artwork-3 .artwork-piece, curly braces, now again instead of having to type it all out we get to use our @include, type in gradient, the CSS is generated and let's check our browser, scroll down, here's the first one, and there is the second one.

Great so now we're starting to see why mixins are quite useful, okay, we can take long bits of code, jam them into a mixin and then use them in an include throughout my SCSS.

The only trouble with this implementation is that this box is the same color as this box.

In my original one they are separate, so what we're going to do is that we're going to add a variable.

We looked at variables earlier, so we're going to use them in conjunction with a mixin so that these two boxes can be a little bit unique.

So back into Dreamweaver, so what we've done here is we've actually hardcoded the colors, we've said in this mixin be these colors.

And down here they're conjected.

So what I'd like to do is I'd like to switch out these colors here for a variable, and that way, later on, down here is, I can adjust the colors.

So let's look at doing that.

Let's create two variables, you do it up here in the mixin just after the word gradient.

Let's put in brackets.

And inside here like we did earlier, we're going to add a dollar sign for the variable and we'll call this one $gradient-color1.

And that will represent the first color of this gradient, now gradients, remember, start at one color and move to the other one, so we've got our first color and we need a second color.

So I want to do a second gradient.

You just put a comma in, $gradient-color2.

Great!

So let's go and use these variables, that's what's we're going to do.

So I'm going to switch out all this color, the rgb and all its coordinates, delete it and I put my brackets in and stick my variable in.

Do the same for the second color.

So we'll remove all of this, put it in brackets and make this one gradient 2.

And because, remember, this repeats itself over and over for the different browsers we're going to repeat ourselves over and over.

Goodbye hardcoded rgb, goodbye hardcoded rgb, same for the second color, you're gone, you're gone.

So what we need to do is put in that color.

We do it down here.

We're going to use our great @include and we're going to add our variable.

Our variable is that color, so I'm putting it in my brackets, the first color was this rgb pink color, then a comma and the second color is kind of a peach color.

So this include is using my gradient mixin.

Which is everything, and the only little bit of variable, that little change we can do, is this color here - called "color1", and color2.

You can see down here that's my color1 that I'm going to stick in there and my color2 that I'm going to stick in.

Check it in the browser, and the world has ended!

It's okay, jump back into Dreamweaver.

The reason is that we finished this first include for .artwork-1, but we didn't actually finish it for .artwork-3, so let's finish him.

Brackets, my start color, which is a purple, comma and then my ending rgb color, check it in the browser now, scroll down, okay, there's the first one, it goes from pink to a peach, and this last one down here from blue to purple.

Yay for mixins!

So the last one, let's do the footer.

So remember the footer is an HTML predefined tag so it doesn't need the period in front.

Curly braces, let's use this same bit, Copy and Paste, and it uses these two rgb codes for it's gradient, let's check in our browser.

Check it out, gradient up here, gradient here and gradient down the bottom.

So we've seen the powers now of mixins, and adding variables to it allow us good control over those mixins.

So that my friends is a CSS preprocessor.

We've looked at three of its amazing features, The variable at the top, a nice and simple one.

That's the one I use the most.

Then we've looked at this nesting, where you can have classes inside classes.

And down the bottom here where we've used mixins we've got nice long bits of code that we get to distill down into single lines.

And all of this is not possible in regular CSS.

But Dreamweaver compiles it, puts it into the regular CSS, let's have a look.

And this is what is produced in the end.

Our variables get jammed in places, and all the compound selectors get created from our little nest that we've made in our preprocessor.

And down here the long bit of code gets injected into these classes that in our SCSS file, we just get to deal with this one line.

And a special thanks from me to Dreamweaver for removing all the command line, compiler, configuration stuff that used to baffle me and hiding it away and making it super easy.

And that is it for CSS preprocessors, thank goodness, because that group of words I find very hard to say.