In this course you will learn how to use Less. Less is a tool to build more efficient and dynamic CSS. You can use Less to compile into efficient and compatible CSS for your website. This will save you time and headaches when trying to remember all the prefixes for every browser. You can also use variables in your CSS.
Take a look at the course break down below:
1. Less Introduction
In this episode we give you an introduction to Less CSS. We'll teach you a few brief things in this video including how to install Less via the Command Line, how to create and compile a LESS file, and how to install a watcher to listen for changed files.
Below you will find the links used in this episode:
In this video we'll teach you how to use nested rules. By leveraging nested rules your styles will be easier to manage. Being able to nest your CSS makes it more enjoyable. Take a look at the following code we used in the video above:
Using variables in your stylesheets will make coding and designing your web page so much more enjoyable. You can specify a variable for a specific color value and then change that color anytime and it will be changed across your whole file. In addition to value variables you can also create variables for an ID, class, or property. Take a look at the code below that was used in the video:
In this video we'll show you how to use mixins and extend other selectors. By leveraging mixins and extending selectors you will find that you don't have to repeat yourself as often. Below is the LESS Css code that we used in the video above.
In this video we'll show you how to use mixins with parameters. Using parameters with your mixins allows you to pass values to your mixin. Take a look at the example code of using parameters in your mixin. This is the code that we used from the video above:
Mixins can be used as functions to create variables, perform operations and even create sub mixins. In this video we teach you how to do all of this. Below you will find the style.less file used in the video above:
Import Directives allow us to include other less files inside another less file. You can think of this similar to a PHP include. In order to include a less file inside of one of your other files you can simply use the `@import` functionality like so:
Take a look at the code we used for the video above:
And as long as we have a file named `box.less` in the same directory it will include all the styles from the box.less into our stylesheet.
8. Less Mixin Guards
In this video we'll show you how to use Mixin Guards to add conditionals to your selectors. Take a look at the code example below where we set the `#container` width to `1000px` if `@wide` was set to `true`
Thanks again for checking out this LESS course. I hope that you will use LESS in your next project to make coding your stylesheets a lot more manageable, compatible, and cleaner. Plus... It'll make your life easier ;)