Less is an open-source pre-processor. It makes writing and maintaining CSS easier by allowing the author to define and use variables, mixins etc. It also has features like Guards using which conditional styles can be written, Loops which help to keep the code DRY and a lot of in-built functions to perform math operations, string and color manipulations etc.
Not to be confused with the Unix tool of the same name.
In the contrast function, the output-for-dark-ref-color and output-for-light-ref-color can be provided in any order. The function automatically identifies which is the dark color (to be used when ref color is light) and which is light color (to be used when ref color is dark) based on their own luma values.
As at the time of writing (Aug '16), parent selector (&) always refers to the full parent selector chain right till the top most level. It cannot be used to select just the immediate parent or the root most ancestor alone.
That is, in the below code &#type1 would resolve to #demo-container .content#type1 and not just .content or just #demo-container.
#demo-container {
padding: 4px;
border: 1px solid gray;
#heading {
padding: 4px;
font-size: 20px;
}
.content {
padding: 2px;
font-size: 18px;
&#type1 {
color: chocolate;
}
}
}