LESS (stylesheet language)
Encyclopedia
LESS is a dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass
and has influenced newer "SCSS" syntax of Sass, which adapted its CSS like block formatting syntax.
LESS is open-source
. Its first version was written in Ruby
, however in the later versions, use of Ruby
has been deprecated
and replaced by JavaScript
. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics.
LESS provides the following mechanisms: variable
s, nesting, mixin
s, operators
and functions.
LESS can run on the client-side (Internet Explorer 6
+, WebKit
, Firefox) and server-side, with Node.js
or Rhino (JavaScript engine)
.
(@). Variable assignment is done with a colon
(:).
During translation, the values of the variables are inserted into the output CSS document.
The above code in LESS would compile to following CSS code.
CSS3 does not support mixins. Any repeated code must be repeated in each location. Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.
The above code in LESS would compile to following CSS code:
LESS has a special type of ruleset called parametric mixins which can be mixed in like classes, but accepts parameters.
The above code in LESS would compile to following CSS code:
The above code in LESS would compile to following CSS code:
LESS is inspired by Sass. Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.
The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).
programming language. Unlike LESS, it doesn't require the JavaScript interpreter (Rhino
), and it allows ZUSS to invoke Java methods directly.
file to convert the code on-the-fly
, the browser then renders the output css.
Another option it to render the less code into pure css prior to uploading the results to a site. Once the code is converted into pure css, it is then uploaded onto a site, however no .less files are uploaded and nor does the site need the less.js javascript converter.
Sass
Sass, Saß or SASS may refer to:* Sass * Single Action Shooting Society, a sanctioning organisation for cowboy action shooting* Shanghai Academy of Social Sciences* Society for the Advancement of Scandinavian Study...
and has influenced newer "SCSS" syntax of Sass, which adapted its CSS like block formatting syntax.
LESS is open-source
Open-source software
Open-source software is computer software that is available in source code form: the source code and certain other rights normally reserved for copyright holders are provided under a software license that permits users to study, change, improve and at times also to distribute the software.Open...
. Its first version was written in Ruby
Ruby (programming language)
Ruby is a dynamic, reflective, general-purpose object-oriented programming language that combines syntax inspired by Perl with Smalltalk-like features. Ruby originated in Japan during the mid-1990s and was first developed and designed by Yukihiro "Matz" Matsumoto...
, however in the later versions, use of Ruby
Ruby (programming language)
Ruby is a dynamic, reflective, general-purpose object-oriented programming language that combines syntax inspired by Perl with Smalltalk-like features. Ruby originated in Japan during the mid-1990s and was first developed and designed by Yukihiro "Matz" Matsumoto...
has been deprecated
Deprecation
In the process of authoring computer software, its standards or documentation, deprecation is a status applied to software features to indicate that they should be avoided, typically because they have been superseded...
and replaced by JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics.
LESS provides the following mechanisms: variable
Variable (programming)
In computer programming, a variable is a symbolic name given to some known or unknown quantity or information, for the purpose of allowing the name to be used independently of the information it represents...
s, nesting, mixin
Mixin
In object-oriented programming languages, a mixin is a class that provides a certain functionality to be inherited or just reused by a subclass, while not meant for instantiation , Mixins are synonymous functionally with abstract base classes...
s, operators
Operator (programming)
Programming languages typically support a set of operators: operations which differ from the language's functions in calling syntax and/or argument passing mode. Common examples that differ by syntax are mathematical arithmetic operations, e.g...
and functions.
LESS can run on the client-side (Internet Explorer 6
Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...
+, WebKit
WebKit
WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...
, Firefox) and server-side, with Node.js
Node.js
Node.js is a software system designed for writing highly-scalable internet applications, notably web servers.Programs are written in JavaScript, using event-driven, asynchronous I/O to minimize overhead and maximize scalability....
or Rhino (JavaScript engine)
Rhino (JavaScript engine)
Rhino is an open source JavaScript engine. It is developed entirely in Java and managed by the Mozilla Foundation. The Foundation also provides another implementation of JavaScript engine written in C known as SpiderMonkey....
.
Variables
Less allows variables to be defined. Less variables are defined with an at signAt sign
The at sign , also called the ampersat, apetail, arroba, atmark, at symbol, commercial at or monkey tail, is formally an abbreviation of the accounting and commercial invoice term "at the rate of"...
(@). Variable assignment is done with a colon
Colon (punctuation)
The colon is a punctuation mark consisting of two equally sized dots centered on the same vertical line.-Usage:A colon informs the reader that what follows the mark proves, explains, or lists elements of what preceded the mark....
(:).
During translation, the values of the variables are inserted into the output CSS document.
@color: #4D926F;
- header {
color: @color;
}
h2 {
color: @color;
}
The above code in LESS would compile to following CSS code.
- header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Mixins
Mixins allow to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments.CSS3 does not support mixins. Any repeated code must be repeated in each location. Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
- header {
.rounded-corners;
}
- footer {
.rounded-corners(10px);
}
The above code in LESS would compile to following CSS code:
- header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
- footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
LESS has a special type of ruleset called parametric mixins which can be mixed in like classes, but accepts parameters.
Nesting
CSS does support logical nesting, but the code blocks themselves are not nested. Less allows to nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
- header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
The above code in LESS would compile to following CSS code:
- header h1 {
font-size: 26px;
font-weight: bold;
}
- header p {
font-size: 12px;
}
- header p a {
text-decoration: none;
}
- header p a:hover {
border-width: 1px;
}
Functions & Operations
Less allows operations and functions. Operations allows to add, subtract, divide and multiply property values and colors, which can be used to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing to manipulate values.
@the-border: 1px;
@base-color: #111;
@red: #842210;
- header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
- footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
The above code in LESS would compile to following CSS code:
- header {
color: #333;
border-left: 1px;
border-right: 2px;
}
- footer {
color: #114411;
border-color: #7d2717;
}
Comparision to Sass
Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.LESS is inspired by Sass. Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.
The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).
Comparision to ZUSS
ZUSS is inspired by LESS. The syntax is similar, except it is tailored for JavaJava
Java is an island of Indonesia. With a population of 135 million , it is the world's most populous island, and one of the most densely populated regions in the world. It is home to 60% of Indonesia's population. The Indonesian capital city, Jakarta, is in west Java...
programming language. Unlike LESS, it doesn't require the JavaScript interpreter (Rhino
Rhino
Rhino is a colloquial abbreviation of rhinoceros"Rhino" may also refer to:-Entertainment:* Rhino , a character from the Marvel Comics universe and sometime-foe of Spider-Man...
), and it allows ZUSS to invoke Java methods directly.
Use on Sites
LESS can be applied to sites in a number of ways, one option is to include the less.js javascriptJavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
file to convert the code on-the-fly
On the fly
-Colloquial usage:In colloquial use, on the fly means something created when needed. The phrase is used to mean:# something that was not planned ahead# changes that are made during the execution of same activity: ex tempore, impromptu.-Automotive usage:...
, the browser then renders the output css.
Another option it to render the less code into pure css prior to uploading the results to a site. Once the code is converted into pure css, it is then uploaded onto a site, however no .less files are uploaded and nor does the site need the less.js javascript converter.