Learning LESS

Get to grips with the CSS preprocessing language LESS
4.4 (4 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
49 students enrolled
$19
$75
75% off
Take This Course
  • Lectures 25
  • Length 1.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

CSS is great; it’s a staple of the web and it helps us to produce beautiful websites, but some parts of it are archaic, and it’s often time-consuming to get right. LESS changes that. LESS includes built-in features that allow you to speed up your development and make your stylesheets easier to produce.

Learning LESS will guide you through the basics of setting up LESS within your workflow. LESS is like CSS on steroids. This course will introduce you to the main features of the language and leave you with the know-how required to make your stylesheets more efficient and maintainable.

This course starts with the fundamentals and shows you how powerful LESS can be. We’ll start by introducing you to the language, followed by incorporating LESS into our workflow, including automation and taskrunners. You’ll learn what variables do and how to use them. You’ll then find out how to create maintainable CSS using mixins and extends, and you’ll discover the best way to organise your LESS code. We’ll look at the powerful built-in functions and finally examine the other ways to power up our front-end development workflow!

Learning LESS takes you from zero to hero, leaving you with the expertise required to produce efficient stylesheets.

About The Author

Anthony Killeen is a veteran front-end developer who has been building websites since ‘97. In that time, he’s built websites for radio stations, music artists, photographers, communities, and businesses and he’s loved every single minute of it!

What are the requirements?

  • This course takes a casual-yet-direct approach to learning LESS. We’ll talk through the features and then get hands-on building out some styles. You’ll learn by doing!

What am I going to get from this course?

  • Get to know the basics of CSS preprocessing so you can work with LESS effortlessly
  • Automate the processing of LESS with task runners
  • Get to know about variables and the best ways to use them within your LESS files
  • Nest your CSS to improve readability
  • Power-up your code with mixins
  • Work with parametric mixins to customize their output
  • Make your code more maintainable by using Extends
  • Get smart with functions by using Color functions, Math functions, and Image functions
  • Use the built-in functions with LESS to produce your own color palette
  • Discover more tools to help level-up your frontend toolkit

What is the target audience?

  • This video is for front-end developers who are used to using CSS, but want to expand their skill set and improve the speed of their workflow.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction to LESS
01:42

This video provides you with an overview of the entire course.

03:14

The aim of this video is to describe what LESS is and what a CSS preprocessor does.

02:09

This highlights just how easy LESS is to work with if you already know CSS.

Section 2: Getting LESS into Your Current Workflow
05:02

The aim of this video is to show the viewer the easiest (but not necessarily the best) way to get up and running with LESS using the direct LESS.js file parser.

06:08

The aim of this video is to show the viewer how to set up a task runner such as Grunt to automate her processing.


08:17

The aim of this video is to show the viewer how to use third-party software to process LESS files.

02:58

We'll take a look at using your code editor to convert LESS on the fly.

Section 3: Variables Can Make Our Lives Easier
05:59

We will explain what variables are and how they work.

02:35

In this, we will take LESS variables beyond basic usage.

03:12

Nesting our LESS selectors can help in organizing our code into useful chunks, and this video will look at the good and bad points of nesting.

02:22

This video will show you how to keep our code organized and in order.

Section 4: Mixins
03:37

Mixins are an awesome feature of LESS, but it’s difficult to understand what they do.

04:17

Browsers can be a pain, especially with CSS3 selectors. Some browsers enable this functionality but behind a flag while the CSS specification is being finalized.

03:15

The mixins we’ve written so far are fixed. If we wanted to change one of the values within our mixin, we could either write a new mixin or copy the code into our core LESS file, removing the mixins altogether. This video shows how to bring arguments into our mixins.

02:23

We looked at a mixin that I’ve written. Now, you can start writing your own.

04:16

Sometimes, it may feel like a chore when you’re constantly including core classes within your HTML. LESS extends can help you avoid this.

03:37

Our .less file may quickly become bloated with variables, mixins, extends, and functions.

Section 5: Power Up Your Code with LESS Functions
03:46

While building our color palette, we may want to have varying shades of our primary colors. We would want an easy way to adjust the colors.

07:25

This video covers more ways of manipulating color.

04:11

Oh no! We need to add padding to an element, but this value is the sum of two other values.

05:26

This video shows you some of the additional features of LESS.

Section 6: Power Up Your Frontend Tool-kit
03:59

Learn about automating repetitive tasks when developing websites.

02:10

Set up a prewritten set of LESS mixins.

05:02

Writing code can sometimes be repetitive and laborious. Emmet fixes this.

05:46

So, we now know the basics of LESS and how to integrate LESS into our workflow, and we also have some new tools to help us out. So, where do we go from here?

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course