Less (style sheet language)

Last updated
Less
LESS Logo.svg
Designed by Alexis Sellier
Developer Alexis Sellier, Dmitry Fadeyev
First appeared2009;15 years ago (2009)
Stable release
4.2.0 [1]   OOjs UI icon edit-ltr-progressive.svg / 7 September 2023;5 months ago (7 September 2023)
Typing discipline Dynamic
Implementation language JavaScript
OS Cross-platform
License Apache License 2.0
Filename extensions .less
Website lesscss.org
Influenced by
CSS, Sass
Influenced
Sass, Less Framework, Bootstrap (v3)

Less (Leaner Style Sheets; sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. [2] Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. [3] Less is an open source project. 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: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers is that Less allows real-time compilation via less.js by the browser. [2] [4]

Contents

Features

Variables

Less allows variables to be defined. Variables in Less are defined with an at sign (@). Variable assignment is done with a colon (:).

During translation, the values of the variables are inserted into the output CSS document. [2] 

@pale-green-color:#4D926F;#header{color:@pale-green-color;}h2{color:@pale-green-color;}

The code above in Less would compile to the following CSS code.

#header{color:#4D926F;}h2{color:#4D926F;}

Mixins

Mixins allows embedding all the properties of a class into another class by including the class name as one of its property, thus behaving as a sort of constant or variable. They can also behave like functions, and take arguments. CSS does not support Mixins: Any repeated code must be repeated in each location. Mixins allows for more efficient and clean code repetitions, as well as easier alteration of code. [2] 

.rounded-corners(@radius:5px10px8px2px){-webkit-border-radius:@radius;-moz-border-radius:@radius;border-radius:@radius;}#header{.rounded-corners;}#footer{.rounded-corners(10px25px35px0px);}

The above code in Less would compile to the following CSS code:

#header{-webkit-border-radius:5px10px8px2px;-moz-border-radius:5px10px8px2px;border-radius:5px10px8px2px;}#footer{-webkit-border-radius:10px25px35px0px;-moz-border-radius:10px25px35px0px;border-radius:10px25px35px0px;}

Less has a special type of ruleset called parametric mixins which can be mixed in like classes, but accepts parameters.

#header{h1{font-size:26px;font-weight:bold;}p{font-size:16px;a{text-decoration:none;color:red;&:hover{border-width:1px;color:#fff;}}}}

The above code in Less would compile to the following CSS code:

#headerh1{font-size:26px;font-weight:bold;}#headerp{font-size:16px;}#headerpa{text-decoration:none;color:red;}#headerpa:hover{border-width:1px;color:#fff;}

Functions and operations

Less allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing manipulation of values.

@the-border:1px;@base-color:#111;@red:#842210;#header{color:@base-color*3;border-left:@the-border;border-right:@the-border*3;}#footer{color:@base-color+#003300;border-color:desaturate(@red,10%);}

The above code in Less would compile to the following CSS code:

#header{color:#333;border-left:1px;border-right:3px;}#footer{color:#114411;border-color:#7d2717;}

Comparison

Sass

Both Sass and Less are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules. [5]

Less is inspired by Sass. [6] [3] 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, and as a result existing CSS can be used as valid Less code. [7]

The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).

Use on sites

Less can be applied to sites in a number of ways. One option is to include the less.js JavaScript file to convert the code on-the-fly. The browser then renders the output CSS. Another option is to render the Less code into pure CSS and upload the CSS to a site. With this option no .less files are uploaded and the site does not need the less.js JavaScript converter.

Less software

NameDescriptionSoftware LicensePlatformFunctionality
WinLess - Windows GUI for less.jsGUI Less Compiler Apache 2.0 [8] WindowsCompiler
CrunchLess editor and compiler (requires Adobe AIR) GPL [9] Windows, Mac OS XCompiler
Editor
less.js-windowsSimple command-line utility for Windows that will compile *.less files to CSS using less.js. MIT License [10] WindowsCompiler
less.appLess CompilerProprietaryMac OS XCompiler
CodeKitLess CompilerProprietaryMac OS XCompiler
LessEngineLess CompilerFreeOpenCart PluginCompiler
SimpLESSLess Compilerfree but no explicit license [11] Windows
Mac OS X
Linux		Compiler
ChirpyLess Compiler Ms-PL [12] Visual Studio PluginCompiler
Mindscape Web Workbench Syntax highlighting and IntelliSense for Less and SassProprietaryVisual Studio PluginCompiler
Syntax Highlighting
Eclipse Plugin for LessEclipse Plugin EPL 1.0 [13] Eclipse PluginSyntax highlighting
Content assist
Compiler
mod_lessApache2 module to compile Less on the flyOpen SourceLinuxCompiler
grunt-contrib-lessNode.js Grunt task to convert Less to CSS MIT [14] Node.jsCompiler
Web EssentialsVisual Studio extension with support for Less and SassApache 2.0 [15] WindowsSyntax highlighting, Content assist, Compiler
clesscPure C++ compiler MIT [16] at least Windows, Linux, MacOSCompiler
Less WebCompilerWeb-based compiler MIT [17] at least Windows, Linux, MacOSCompiler, Syntax highlighting, Minifier

See also

Related Research Articles

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

Haml is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner. Haml gives you the flexibility to have some dynamic content in HTML. Similar to other template systems like eRuby, Haml also embeds some code that gets executed during runtime and generates HTML code in order to provide some dynamic content. In order to run Haml code, files need to have a .haml extension. These files are similar to .erb or .eRuby files, which also help embed Ruby code while developing a web application.

Svelte is a free and open-source component-based front-end software framework, and language created by Rich Harris and maintained by the Svelte core team members.

<span class="mw-page-title-main">Sass (style sheet language)</span> Stylesheet language

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of 2023, the project had over 230K LOCs not counting the embedded Mozilla Rhino compiler.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

Dart is a programming language designed by Lars Bak and Kasper Lund and developed by Google. It can be used to develop web and mobile apps as well as server and desktop applications.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

<span class="mw-page-title-main">Brackets (text editor)</span> Editor for web development

Brackets is a source code editor with a primary focus on web development. Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality.

<span class="mw-page-title-main">Stylus (style sheet language)</span> Stylesheet preprocessor language

Stylus is a dynamic stylesheet preprocessor language that is compiled into Cascading Style Sheets (CSS). Its design is influenced by Sass and Less. It is regarded as the fourth most used CSS preprocessor syntax. It was created by TJ Holowaychuk, a former programmer for Node.js and the creator of the Luna language. It is written in JADE and Node.js.

Leaflet is an open source JavaScript library used to build web mapping applications. First released in 2011, it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Among its users are FourSquare, Pinterest and Flickr.

<span class="mw-page-title-main">Google Fonts</span> Web font library

Google Fonts is a computer font and web font service owned by Google. This includes free and open source font families, an interactive web directory for browsing the library, and APIs for using the fonts via CSS and Android. Google Fonts is also used With the Google Workspace.

<span class="mw-page-title-main">Webpack</span> Open-source JavaScript module bundler

Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

<span class="mw-page-title-main">PostCSS</span> Software development tool that uses JavaScript-based plugins to automate routine CSS operations

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.

<span class="mw-page-title-main">IBM Plex</span> Open source typeface family

IBM Plex is an open source typeface superfamily conceptually designed and developed by Mike Abbink at IBM in collaboration with Bold Monday to reflect the design principles of IBM and to be used for all brand material across the company internationally. Plex replaces Helvetica as the IBM corporate typeface after more than fifty years, freeing the company from extensive license payments in the process.

<span class="mw-page-title-main">Bootstrap Studio</span> Proprietary web design and development application

Bootstrap Studio is a proprietary web design and development application. It offers a large number of components for building responsive pages including headers, footers, galleries and slideshows along with basic elements, such as spans and divs.

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

References

  1. ↑ "Release 4.2.0". 7 September 2023. Retrieved 18 September 2023.
  2. 1 2 3 4 The Core Less Team. "Getting started | Less.js". Less.js. Retrieved 2021-03-19.
  3. 1 2 Weizenbaum, Nathan (2009-06-17). "Sass and Less : Nex3". Archived from the original on 2009-06-21. Retrieved 2021-03-19.
  4. ↑ Meng, Jiew (2010-12-14). Mortensen, Peter (ed.). "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow. Retrieved 2021-03-19.
  5. ↑ Atwood, Jeff (2010-04-30). "What's Wrong With CSS". Coding Horror. Retrieved 2022-12-03.
  6. ↑ The Core Less Team. "About | Less.js". Less.js. Retrieved 2021-03-19.
  7. ↑ Eppstein, Chris (2010-11-10). "sass_and_less_compared.markdown". GitHub Gist. Retrieved 2021-03-19.
  8. ↑ Lagendijk, Mark (2013-01-29). "License Information · Issue #55 · marklagendijk/WinLess". GitHub. Retrieved 2021-03-19.
  9. ↑ Dean, Matthew (2011-12-02). "Crunch/LICENSE.txt at master · matthew-dean/Crunch". GitHub. Retrieved 2021-03-19.
  10. ↑ Smart, Duncan (2013-07-25). "less.js-windows/LICENSE at master · duncansmart/less.js-windows". GitHub. Retrieved 2021-03-19.
  11. ↑ Engel, Christian (2012-07-29). "SimpLESS/LICENSE.txt at master · Paratron/SimpLESS". GitHub. Retrieved 2021-03-19.
  12. ↑ Evan Nagle. "Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive". CodePlex. Archived from the original on 2021-02-20. Retrieved 2021-03-19.
  13. ↑ Vincent Simonet. "Eclipse plugin for LESS". normalesup.org. Retrieved 2021-03-19.
  14. ↑ Kellen, Tyler (2012-09-04). "grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less". GitHub. Retrieved 2021-03-19.
  15. ↑ Kristensen, Mads (2014-06-18). "WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013". GitHub. Retrieved 2021-03-19.
  16. ↑ Bram van der Kroef (2017-07-11). "clessc/LICENSE at master · BramvdKroef/clessc". GitHub. Retrieved 2021-03-19.
  17. ↑ SamBrishes (2018-12-15). "snout.less/LICENSE.md at master · pytesNET/snout.less". GitHub. Retrieved 2021-03-19.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.