Take this
course

Software Development / Web Development

Learning LESS

Get to grips with the CSS preprocessing language LESS

Description

About This Video

  • Write more efficient CSS, faster
  • Realise the perks of using mixins
  • Follow along with the course’s practical, hands-on examples


In Detail

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.

Full details

Curriculum

  • Introduction to LESS
    The Course Overview
    This video provides you with an overview of the entire course.
    1:43
    What Is LESS?
    The aim of this video is to describe what LESS is and what a CSS preprocessor does. • Learn how LESS and CSS are similar in syntax • Learn how LESS works and how it can improve our work • Learn converting LESS into CSS and the output
    3:15
    Woah! It's That Easy, Huh?
    This highlights just how easy LESS is to work with if you already know CSS. • Learn some standard CSS • Learn the equivalent in LESS • Check out the similarities between the two
    2:10
  • Getting LESS into Your Current Workflow
    LESS.js
    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. • Include the LESS.js file • Include the styles.less file • View it in the browser
    5:03
    Using a Task Runner
    The aim of this video is to show the viewer how to set up a task runner such as Grunt to automate her processing. • Install the LESS Grunt or Gulp plugin • Set up the plugin • Run the plugin
    6:09
    Using Third-party Software
    The aim of this video is to show the viewer how to use third-party software to process LESS files. • Download and install the third-party software • Set up the software • Run the software
    8:18
    Using Our Code Editor
    We'll take a look at using your code editor to convert LESS on the fly. • Open your code editor • Locate and install the plugin • Run the plugin
    2:59
  • Variables Can Make Our Lives Easier
    What Is a Variable and How Does It Work?
    We will explain what variables are and how they work. • Identify a value that can be replaced with a variable • Write the variable • Explain what variables are and how they work
    6:00
    Advanced Variable Usage
    In this, we will take LESS variables beyond basic usage. • Set up some variables • Pull these variables into class names • Write the classes
    2:36
    Basics: Nesting
    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. • Find some code and nest them • View the nested code
    3:13
    Advanced: Nesting
    This video will show you how to keep our code organized and in order. • Identify some pseudo elements • Rewrite them using LESS Nesting and view the compiled CSS
    2:23
  • Mixins
    The Anatomy of a Mixin
    Mixins are an awesome feature of LESS, but it’s difficult to understand what they do. • Learn what a mixin is • Learn how to write a mixin • Call a mixin and show the output
    3:38
    Using Mixins for Cross-browser Compatibility
    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. • Highlight your mixin • Insert cross-browser code • Compile the cross-browser code
    4:18
    Parametric Mixins
    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. • Realize that you want to change a value within your mixin • Isolate the value with an argument • Update the mixin and test
    3:16
    Writing Your Own Mixins
    We looked at a mixin that I’ve written. Now, you can start writing your own. • Identify some code that may be suitable for a mixin • Write the mixin • Call the mixin from LESS and demo
    2:24
    Writing LESS Code with Extends
    Sometimes, it may feel like a chore when you’re constantly including core classes within your HTML. LESS extends can help you avoid this. • Highlight a repeating class • Form an extend and preview the newly extended code
    4:17
    A Final Word on Organization
    Our .less file may quickly become bloated with variables, mixins, extends, and functions. • Create a separate file • Cut and paste the corresponding code and then save • Import this code back into your .less file
    3:38
  • Power Up Your Code with LESS Functions
    Color Functions
    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. • Set up some colors • Apply the functions and take a look at some new colors
    3:47
    Advanced Color Functions
    This video covers more ways of manipulating color. • Write a color function • Pass a color reference and watch it change color
    7:26
    Math Functions
    Oh no! We need to add padding to an element, but this value is the sum of two other values. • Use the LESS math functions to do the math • Get better values
    4:12
    Image Tools and Other Available Functions
    This video shows you some of the additional features of LESS. • List and demonstrate other functions • Use other functions
    5:27
  • Power Up Your Frontend Tool-kit
    Task Runners Such as Grunt or Gulp
    Learn about automating repetitive tasks when developing websites. • Install your task runner • Install and configure your plugins • Run your task runner
    4:00
    LESS Prefixer
    Set up a prewritten set of LESS mixins. • Download and install a LESS Prefixer • Glance through the docs displayed and begin using inbuilt mixins
    2:11
    Emmet
    Writing code can sometimes be repetitive and laborious. Emmet fixes this. • Learn the process of installing Emmet • Write code and convert it into HTML
    5:03
    So, Where Do We Go from Here?
    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? • Take a look at what else you can learn • Go through some more advanced features • Review more links and resources for other tools and technologies to help our frontend development
    5:47

Skills

  • Cascading Style Sheets (CSS)
  • Front-End Web Development

Similar Courses

More Courses by this Instructor