Writing better CSS with LESS
Playing problem
This video does not seem to be available
00:00
00:00

VIDEO TUTORIAL Writing better CSS with LESS

Sandy Ludosky
15,00€

Unlimited download & streaming

Satisfied or refunded

100% secure payment

What is LESS  and Why to use it

Less is a superset of CSS and a pre-processor programming language, often referred as "Dynamic CSS".

  • LESS syntax is modelled after traditional CSS
  • LESS compiles into standard CSS3
  • LESS allows you to extend your CSS with great features such as : Variables for faster maintenance, Mixins as re-usable objects, Nesting for a cleaner stylesheet structure, Math calculations with the Operators.
  • Less code and more work done !

While CSS is a great language, it has its limitations.
For example, if you have a color code used multiple times in your stylesheet, you need to edit this one multiple times to update your design. Very tedious process!
LESS is great for the following reasons. :

  • Allows to cut down one code and save time
  • Reduce repetition (DRY) and mistakes
  • It makes logical sense to break out CSS into multiple files with the feature

Every web developer or front-end UI engineer should use LESS over traditional CSS
 

What you will learn in this LESS video tutorial :

In the first section, you will :

  • learn how to define Variables for faster maintenance.
  • learn how to declare Mixins as reusable objects
  • learn about Nesting for a cleaner stylesheet structure.
  • learn how to perform mathematical calculations with the Operators

On a more advanced level, we will discuss about:

  • Built-in functions
  • Parametized and Guardes mixins
  • The @import directive to include external stylesheets in one single document.

In a last chapter, you will apply what you have learned with a hand-on project.

The objectives of this course is to help you

  • create smarter and cleanerer stylesheets,
  • cut down on code,
  • keep your code DRY (Don't Repeat Yourself) and organized.

 By the end of the course :

  • you will understand how to use the LESS features and compile the less stylesheets into standard CSS
  • you will understand how to easily integrate mixins libraries as well as external resources such as Font Awesome and Google Font into your project.
  • You will also be able to install and use the application SimpLESS to compile your less files into beautiful CSS. (SimpLESS is a GUI application for Less and Sass compilation. It is simple to learn for first-time users and it is compatible with both PC and MAC)

With this video course, learn to take your CSS to the next level and write better styling code. With several demonstrations and examples. you will see the power of the pre-processor language.

What will you learn in this course?

Course plan
Chapter 1
LESS Basics
Chapter 2
LESS Advanced
Chapter 3
Project Demo

Detailed course plan

Chapter 1 : LESS Basics
36m47s
 
Lesson 1Introduction Basics
Lesson 2Variables
Lesson 3Mixins
Lesson 4Nesting
Lesson 5Operators
Lesson 6Introduction Advanced
Chapter 2 : LESS Advanced
29m11s
 
Lesson 1Parametized Mixins
Lesson 2Guarded Mixins
Lesson 3Built-in Functions
Lesson 4Import Directive
Chapter 3 : Project Demo
33m08s
 
Lesson 1Project Overview
Lesson 2Grid Layout
Lesson 3Main Section
Lesson 4Header
Lesson 5Footer
Lesson 6More

Previews

Your questions about the course

With which software version is this tutorial compatible with?

CSS

What is the required level to follow this tutorial ?

beginner

Wait ! 🤗

Access more than 19 free tutorials

Our data protection policy