Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
  • Overview
  • Transcript

2.6 Introduction to Preprocessors

Hey, welcome back. So, you might wonder what these pre-processors are all about. Well, in short, they help you write CSS faster. Basically, it's like a programming language for CSS. You can use nesting, variables, and all sorts of cool stuff that CSS doesn't have yet. Once you do that, you compile that file in viable CSS file. Now there are a few of these pre-processors around, Stylus, Less or Sass just to name a few, but the last two are probably the most used. Now Less can be found at lesscss.org. And it's somewhat simpler than Sass, so it's probably the best thing to go with if you are a beginner. Once you learn it, you'll be able to user the other pre-processors with very little learning time. Sass can be found at sass-lang.com and both of these have sections in them which help you learn the language. Now the thing with a pre-processor is that you need the compiler to transform that file in a CSS file. There are a few of those. For example, SimpLess for MacOS with is free. It will take a Less file and compile it in a CSS file. If you want an application that's more complex, it supports multiple pre-processors, then you might go for CodeKit. CodeKit is actually the one I'm using. If you're using Windows, you can go to WinLess.org. They also have an application. Free application that will compile Less files. So I'm going to give you a very short introduction to LESS and show you how to use it. Now I'm working in a folder called Lesson 6. This is where I'll show you how to use this stuff. So what I did was I clicked and dragged this folder into CodeKit. And it created this entry right here, on the left side. And make sure this one is selected. Now inside my Code Editor, I'm gonna do the following. I'm gonna, gonna create a new file called styles.less. So notice the extension, the file extension.less. Save this, and if I go back to code kit, I'm gonna right click, and I'm gonna refresh. And notice, we have a less file, which is set to compile into styles.css. So, now, if I type something in it, and save, it will automatically create my CSS file. Now there are loads of stuff you can do with Less. For example a handy feature is the use of variables. So you can create a variable called, let's say, text color. And let's set it to blue just for the sake of it. And then I can go into paragraph and set color to text color. Save that and in my CSS file, this will compile to the actual blue color. Pretty cool, right? I can also do lots of stuff with the actual color. For example, I can lighten it or I can darken it. Let's say background, background-color. Let's say darken the text color, oops, by 50%. Save and this will generate different background colors. I can also use nesting. For example, if I have a div with a class of container with a couple of styles. Let's say padding 10ems, and inside that div I also have some paragraphs so I can do this, paragraph, color, red and this will compile to container p just like you would write it in CSS. Or let's say I have an anchor tag. Let's say I remove the text decoration and I create a hover state. [BLANK_AUDIO] This translates to a, and then a:hover. So as you can see, there are lots of things you can do with Less. You can create some pretty complex CSS files very quickly. And the cool thing is, those CSS files are easier to maintain. You can also split your files into, into smaller files that cater to a specific area in your project. For example, you can have a Less file for buttons, one for tables, one for general typography, one for layout options. So the possibilities are endless. So, that's the Less in very simple words. If you want to know more, check out the lesson notes. I've included some links from some existing tutorials on Less. Now, if you want to go pro when it comes to web design, you have to know about responsive websites, so that's coming up next.

Back to the top