less

What is less?

The 'less' npm package is a pre-processor for CSS, which extends the capabilities of CSS with dynamic behavior such as variables, mixins, operations, and functions. It allows developers to write CSS in a more maintainable and extendable way.

What are less's main functionalities?

Variables

Variables allow you to specify widely used values in a single place, and then reuse them throughout the stylesheet, making your CSS more maintainable.

@primary-color: #4D9FEC;

a {
  color: @primary-color;
}

Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It's like variables, but for whole classes.

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  .bordered;
}

Nested Rules

Nested rules make it possible to nest selectors inside other selectors. This makes the structure of your CSS mirror the structure of your HTML.

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Functions & Operations

Functions and operations let you manipulate numbers and colors, doing math with them and applying functions to achieve dynamic results.

@base: 5%;

.padding {
  padding: @base * 2;
}

Other packages similar to less

sass

Sass (Syntactically Awesome Stylesheets) is a mature, stable, and powerful professional grade CSS extension language. It provides similar features to Less, such as variables, mixins, and nested rules. Sass has two syntaxes: the original 'indent' syntax that is similar to Haml and the newer 'SCSS' that uses braces like CSS. It's one of the most popular CSS preprocessors.

stylus

Stylus is a preprocessor that offers a mix of features from both Sass and Less, as well as some additional unique features. It has a more flexible syntax that can be written with or without braces, colons, and semicolons. Stylus provides powerful and efficient stylesheet writing capabilities.

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is different from preprocessors like Sass and Less in that it's modular and can be configured to perform a wide variety of tasks.

README

Less.js

The dynamic stylesheet language. http://lesscss.org.

This is the JavaScript, official, stable version of Less.

Getting Started

Options for adding Less.js to your project:

• Install with NPM: npm install less
• Download the latest release
• Clone the repo: git clone git://github.com/less/less.js.git

More information

For general information on the language, configuration options or usage visit lesscss.org.

Here are other resources for using Less.js:

• stackoverflow.com is a great place to get answers about Less.
• Less.js Issues for reporting bugs

Contributing

Please read CONTRIBUTING.md. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Reporting Issues

Before opening any issue, please search for existing issues and read the Issue Guidelines, written by Nicolas Gallagher. After that if you find a bug or would like to make feature request, please open a new issue.

Please report documentation issues in the documentation project.

Development

Read Developing Less.

Release History

See the changelog

License

Copyright (c) 2009-2014 Alexis Sellier & The Core Less Team Licensed under the Apache License.

Changelog

v1.7.5 (2014-09-03)

• #2173 Property interpolation fix for @* values (@seven-phases-max)
• #2169 Accept comments in @keyframe and after rule name - merging for next patch release. (@SomMeri)
• #1921 Pass options object to parser.parse in less.render (@rback)
• #2136 Fragment handling in data-uri function 1959 (@SomMeri)
• #2135 Charsets should float on top #2126 (@SomMeri)
• #2128 Mixin wrongly called (@SomMeri, @obecker, @dhaber)
• #2144 Updating request dependency (@pdehaan)
• #2123 Import into media 1645 (@SomMeri, @obecker, @dhaber)