What is LESS? LESS is a “dynamic stylesheet language” or technically a CSS preprocessor. This means that LESS supports and extends the CSS language, makes CSS become more flexible using variables, functions and classes. LESS arises as one of the popular CSS preprocessors, along with two others: Sass and Stylus.
Why LESS?
We all have to agree that CSS is an easy to learn and use, especially when it comes to theme and web development. The introduction of CSS3 has made things better and greater. However, sometime we found ourselves repeat code over and over again all over the stylesheet, and this is not what we usually call “Don’t repeat yourself”. Thus, whenever a change needs to be done, it has to be done in different places.
This is when LESS comes in and save the day. CSS is static, while LESS is dynamic. It has variables to control values and changes in variables will be applied to all over the stylesheet, mixins for cleaner code.
We have been using LESS for all our WordPress themes for a long time now. The development process is faster and better. Moreover, the syntax in LESS is quite identical to CSS and you can start using LESS right away without difficulty.
Features of LESS
Full list of features is available at LESS official site.
Variables
You will find that Variables in LESS work like they do in most other programming languages. They control and store values from one place, thus you only need to use variables instead of values. Also it is easy and convenient when you want to make changes.
@line-height-base: 1.5; @modal-title-padding: 15px; @modal-title-line-height: @line-height-base; @modal-content-bg: #fff; @modal-content-border-color: rgba(0,0,0,.2);
Operations
According to LESS, any color, number and variable can be operated.
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
}
Nesting
In LESS we can nest or combine rules to write our stylesheet shorter, cleaner and more logical:
Variable:
@line-height-computed: 20px;
Write in LESS:
h1 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
small {
font-size: 65%;
}
}
and output CSS:
h1{
margin-top: 20px;
margin-bottom: 10px;
}
h1 small {
font-size: 65%;
}
Mixins
Quite similar to functions in programming languages, Mixins in LESS will save us a lot of typing time. Basically, it groups CSS instructions and any CSS class or id ruleset can be mixed-in that way:
Mixin:
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus {
color: @color;
background-color: darken(@background, 8%);
border-color: darken(@border, 12%);
}
}
LESS rule:
.btn-default {
.button-variant(#333333; #ffffff; #cccccc);
}
and output CSS:
.btn-default {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
.btn-default:hover,
.btn-default:focus {
color: #333333;
background-color: #ebebeb;
border-color: #adadad;
}
Importing
LESS allows you import both CSS and LESS files with the following syntax:
@import (keyword) "filename";
There are couple rules that you should know regarding import options, you can read details at LESS website. The two important rules that you should learn are about how LESS would treat LESS and CSS imported files.
@import "grid.less"; @import "grid";
Above sample: treat imported files as .less files, and all the variables and mixins inside them.
If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:
@import "grid.css";
Extend
Introduced in version 1.4.0 of LESS, extend features bring the flexibility to LESS’s implementation. You can either use extend directly to a selector itself or inside a statement.
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
the output CSS:
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
In addition, you can specify all or any specific selector within your extend
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}
Output CSS:
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
Side note: Responsive
This is not technically a feature of LESS, however if you already use Bootstrap along with LESS, you would find this function is amazing when it comes to mobile-first development and responsive design on mobile devices and tablets.
Here’s an example of LESS helps me to build styles in a much more power, flexible, and responsive way:
.container {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
Using LESS
Getting started
If you are working on your live site or client’s site and it’s already on server, then here is the steps:
Step 1 Download the less.js file from Less.org
Step 2 Link your .less file
<link rel="stylesheet/less" type="text/css" href="style.less">
Step 3 Link the less.js file to your page like you do with other JavaScript files: put in the <head> tags of your mark-up
<script src="less.js" type="text/javascript"></script>
Note: Make sure that you link your LESS file before the Javascript file.
In case of production and development, have your LESS file ready and you can use GUI tools to compile into CSS file.
Edit stylesheet
If you already know LESS and it would be easier for you to edit a stylesheet. Simply edit the LESS file directly and then compile it into compressed CSS file. This way will save your site loading time, compared to uncompressed file.
What if you don’t know about LESS and want to edit the CSS file like the old way? There are 2 ways you can do it:
- You can use any of GUI tools to compile the LESS file into uncompressed CSS file. Then you can edit directly on this CSS file.
- You can override the compressed CSS file. This is highly recommended as it would perform like you edit an uncompressed file but be lighter and makes your site load faster.
LESS is no longer a strange phrase and the benefit of it in development is undeniable. It’s up to personal choice whether to use CSS or LESS, but if you have not got your hands on it, you should do it now.
Inline Comment is awesome!