cssLess

Less is a stylesheet language that is informed by the CSS you already know how to write and is compiled into CSS for use in your projects and for browsers to interpret.

Compiled is just a tech way of saying converted. So, in this case, your Less file is converted into a CSS file.

Writing Less gives you access to a wide variety of features and benefits that are not possible writing standard CSS. You’ll find yourself typing less, repeating yourself less, and creating less of a mess while you design your pages. (So it’s a pretty well named project, right?)

Let’s take a look at some of the features that make this possible.

Variables

Using Less, you can create variables to use throughout your stylesheets.

Variables are a common feature in most programming languages (though they may look different from language to language) and help you writer simpler, more consistent code.

👉🏻 Learn how to create and use variables

Functions

Less includes several built-in functions for modifying colors, including lightening, darkening, mixing, inverting.

👉🏻 Explore Less functions

Nesting

Writing Less allows you to write less code, since you can nest your selectors inside of each other.

👉🏻 Learn how to nest your selectors

Less comments

There are also two ways of writing comments in Less. If you write standard CSS comments, they will appear as expected in your compiled CSS file. Alternately, you can write Less comments that will not be compiled. Here’s an example of both comment types in a Less file:

/* This is a typical CSS comment you're used to */

// This is a new Less-style comment

And this is how it would output as CSS:

/* This is a typical CSS comment you're used to */

The second style of comment would not appear in your final CSS document, only in the Less files.

In general, it’s fine to use either style of comments. Using CSS-style comments will result in a larger CSS file, but it is unlikely that you will be writing so many comments for this to have a measurable impact.

Preprocessors

As noted at the start of this page, Less isn’t CSS, but your Less file gets compiled into CSS for use in your projects. This makes Less an extension of CSS and this type of extension is known as a preprocessor.

The processing of Less into CSS will happen automatically with the Less project template you’ll be remixing on Glitch, but it’s worth noting that this is hiding away some of the complexity of using Less.

The following is not needed for your projects this semester, but is provided as additional context if you want to use Less in other projects in the future.

If you want to use Less on a project that is not using Glitch, you’ll have to do some additional reading about installing and using Less ✳️ from the command line. You can also use an application — (Prepros ✳️ works on all operating systems and is one I used in the past).