Less.js CSS3

Less is a CSS preprocessing language, it expands the CSS language, add such functions as variable, mixed (mixin), function, make CSS easier to maintain, easy to create themes, expand.

Less can be run on Node, browser, and Rhino platforms. There are many third-party tools online to help you compile less source code.

http://lesscss.org

http://lesscss.org/less-preview/

Getting Started

Less are a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, funct Ions and many other techniques this allow you to make CSS which is more maintainable, themable and extendable.

Less runs inside Node, in the browser and inside Rhino. There is also many 3rd party tools, allow you to compile your files, and watch for changes. The quickest place for first experiments and less are our online editor.

For example:

@base:#f938ab;. Box-shadow (@style,@c)When (IsColor (@c)) {-webkit-box-shadow:@style@c;Box-shadow:@style@c;}. Box-shadow (@style,@alpha:50%)When (isnumber ( @alpha)) {.box-shadow ( @style, rgba (0, 0, 0,  @alpha));} .box {color: saturate ( @base, 5%); border-color: lighten (@ Base, 30%); div {.box-shadow (0 0 5px, 30%)}}      

Compiles to

.box {color:  #fe33ac; border-color:  #fdcdea;} .box div {-webkit-box-shadow: 0 0 5px rgba ( 0, 0, 0,  0.3); box-shadow: 0 0 5px rgba (0, 0, 0, 0.3);          

Using Less

Less can is used on the command line via NPM, downloaded as a script file for the browser or used in a wide variety of thi RD party tools. See the Usage sections for more detailed information.

Installation

The easiest-to-install less-on-server, is via NPM, the node. js Package Manager, as so:

$ npm install -g less

Command-Line Usage

Once installed, you can invoke the compiler from the command-line, as such:

$ lessc styles.less

This would output the compiled CSS to stdout . To save the CSS result to a file of your choice use:

$ lessc styles.less styles.css

To output minified your can CSS use clean-css plugin. When the plugin are installed, a minified CSS output is specified with --clean-css option:

$ lessc --clean-css styles.less styles.min.css

To the "command line Options" Run lessc without parameters or see Usage.

Usage in Code

You can invoke the compiler from node, as such:

var less = require(‘less‘);less.render(‘.class { width: (1 + 1) }‘, function (e, output) { console.log(output.css);});

which would output

.class {  width: 2;}

Configuration

Some options to the compiler:

 var less = require (", //Specify search paths for @import directives filename:  ' style.less ', //specify a filename, for Better error messages compress: true //minify CSS output}, function  (E, output) {console.log (OUTPUT.CSS); });

See Usage for more information.

Third party Tools

See the Usage sections for details of other tools.

Command-Line with Rhino

Each Less.js release contains also rhino-compatible version.

Command Line Rhino version requires the files:

• Less-rhino-<version>.js-compiler implementation,
• Lessc-rhino-<version>.js-command line Support.

Command to run the compiler:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

This would compile styles.less file and save the result to Styles.css file. The output file parameter is optional. If It is missing, less would output the result to stdout .

Client-side Usage

Using Less.js in the browser are great for development, but it's not recommended for production

Client-side is the easiest-to-get started and good for developing with less, but in production, when performance and R Eliability is important, we recommend pre-compiling using node. js or one of the many third party tools available .

To start off, link your .less stylesheets with rel the attribute set to " stylesheet/less ":

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Next, download less.js and include it in a tag in the <script></script> element of your page: /c4>

<script src="less.js" type="text/javascript"></script>

Tips

• Make sure you include your stylesheets before the script.
• When you link to more than one stylesheet each of the .less them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet is not accessible on any other.
• Due to the same origin policy of browsers loading external resources requires enabling CORS

Browser Options

Options is defined by setting them on a global  less  object&NBSP; before Span class= "Apple-converted-space" > the&NBSP; <script src= " Less.js "></SCRIPT> :

 <!--Set options before Less.js script--><script> less = {env:  "Development", Async: false, Fileasync: false, Poll: 1000, Functions: {}, Dumplinenumbers:  "comments", Relativeurls: false, RootPath:  ":/a.com/"}; </script>< script src= "less.js" ></SCRIPT>      

Or for brevity they can is set as attributes on the script and link tags (requires json.parse browser support or Polyfill) .

<script src= "less.js" data-poll=" "data-relative-urls=
           
             "false" >
            </ Script><link  Data-dump-line-numbers= "all" data-global-vars=rel=type=" Text/css " href= "less/styles.less";      
            

Learn more about Browser Options

Get Less.jsBrowser DownloadsDownload less.js v2.5.3download Source Code

Get the latest Less.js source code by downloading it directly from GitHub.

Clone or Fork via GitHub

Fork the project and send us a pull request!

Install with Bower

Install the Less.js project and JavaScript by running the following in the command line:

bower install less

Less CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

License FAQs

Less.js is released under the Apache 2 License (though there was plans to dual License it). Copyright 2009-2015, Alexis Sellier and the less Core Team (see About). Boiled down to smaller chunks, it can be described with the following conditions.

It allows to:

• Freely download and use less.js, in whole or in part, for personal, company internal or commercial purposes
• Use Less.js in packages or distributions so you create

It forbids to:

• Redistribute any piece of less.js without proper attribution

It requires to:

• Include a copy of the license in any redistribution to make it includes less.js
• Provide clear attribution to the less Core Team for all distributions that include Less.js

It does not require your to:

• Include the source of less.js itself, or of any modifications your may has made to it, in any redistribution your may Assem ble that includes it
• Submit changes that less.js back to the Less.js project (though such feedback is encouraged)

The full Less.js license are located in the Project repository for more information.

http://less.bootcss.com/

Https://github.com/less/less.js

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Xx

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Xx

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Xx

Less.js CSS3