LESS CSS - Dynamic Stylesheet Language

  • by Sangeeth G V
  • in
  • on 2 Mar 2013

LESS extends CSS with dynamic behavious such as variables, mixins, namespaces and functions, it makes CSS easy to work with. LESS is a dynamic stylesheet language designed by Alexis Sellier.

Following are the steps

    1. Add a new .less file to your website and reference that in your LINK tag. Updating the rel value to stylesheet/less is necessary because the LESS library looks for this value. Once it’s found it processes that file
      <link href="less/app.less" rel="stylesheet/less" />
      <script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
    2. Now open the less/app.less and add the sample css

      @back-color: #000;
      @font-color: #fff;
      body {
          background-color: @back-color;
          font-size: .85em;
          font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
          margin: 0;
          padding: 0;
         color: @font-color;


For more information please refer the following link http://en.wikipedia.org/wiki/LESS_%28stylesheet_language%29

Total votes: 328


Be the first one to write about this.

Your Comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.