1. variable

Less's variable name starts with the @ symbol:

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;

body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

The preprocessor will eventually produce the same result:

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;}

2. nesting

less:

section {
  margin: 10px;

  nav {
    height: 25px;

    a {
      color: #0982C1;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

The preprocessor will eventually produce the same result:

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

3. Mixing Mixins

Mixins are kind of like functions or macros. When a piece of CSS often needs to be used in multiple elements, you can define a Mixin for these shared CSS, and then you just need to call the Mixin where you need to refer to these CSS.
Less's blending grammar:

/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

The preprocessor will eventually produce the same result:

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

4. inheritance

When we want to define multiple elements in the same format, we consider inheritance.
Less's inheritance is more like mixed-in writing:

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

The generated CSS is as follows:

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

5. import

Many CSS developers are not very keen on importing because it requires multiple HTTP requests. However, the import operation in the CSS preprocessor is different. It only contains different files semantically, but the final result is a single CSS file. If you import a CSS file through @ import "file.css"; import a CSS file, the effect is the same as ordinary CSS import. Note: Information such as mixing, variables defined in the import file will also be introduced into the main style file, so they need to be avoided from conflicting with each other.

reset.css:


/* file.{type} */
body {
  background: #EEE;
}

main.xxx:


@ import "reset.css";
@ import "file.{type}";

p {
  background: #0982C1;
}

Generated CSS:

@ import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

6. Color function

CSS preprocessors usually have built-in color processing functions to process color values, such as brightening, darkening, color gradient, etc.

lessCORRELATION COLOR FUNCTION

lighten(@color, 10%); /* returns a color 10% lighter than @color */

darken(@color, 10%);  /* returns a color 10% darker than @color */

saturate(@color, 10%);   /* returns a color 10% more saturated than @color */

desaturate(@color, 10%); /* returns a color 10% less saturated than @color */

spin(@color, 10);  /* returns a color with a 10 degree larger in hue than @color */

spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */

mix(@color1, @color2); /* return a mix of @color1 and @color2 */

See less for a complete list of color functions
http://lesscss.org/#-color-functions

less uses examples of color functions:

@color: #0982C1;

h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

7. operator

You can calculate styles directly in the CSS preprocessor, for example:

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

Some browser-specific processing

This is one of the reasons for promoting the use of pretreatment and is a good reason to save a lot of time and sweat. Creating a mixin to handle CSS writing in different browsers is simple, saving a lot of duplication and painful code editing.

Less writing

.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}

div {
  .border-radius(10px);
}

Compiled results:

div {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

8.3D text

text-shadows can be used to generate text with 3D effect. The only problem is that it is very difficult to modify the color. It can be easily implemented by mixin and color function.

Less CSS Writing:

.text3d(@color) {
  color: @color;
  text-shadow: 1px 1px 0px darken(@color, 5%),
               2px 2px 0px darken(@color, 10%),
               3px 3px 0px darken(@color, 15%),
               4px 4px 0px darken(@color, 20%),
               4px 4px 2px #000;
}

span {
  font-size: 32pt;
  .text3d(#0982c1);
}

Compiled CSS:

span {
  font-size: 32pt;
  color: #0982c1;
  text-shadow: 1px 1px 0px #097bb7,
               2px 2px 0px #0875ae,
               3px 3px 0px #086fa4,
               4px 4px 0px #07689a,
               4px 4px 2px #000;
}

Design sketch:

The 9. column

Using numerical operations and variables can easily achieve layout processing adapted to screen size.

Less CSS Writing:

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;

body {
  margin: 0 auto;
  width: @siteWidth;
}
.content {
  float: left;
  width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
  float: left;
  margin-left: @gutterWidth;
  width: @sidebarWidth;
}

Actual results after compilation:

body {
  margin: 0 auto;
  width: 1024px;
}
.content {
  float: left;
  width: 704px;
}
.sidebar {
  float: left;
  margin-left: 20px;
  width: 300px;
}

10. Avoid compilation

Sometimes we need to output some incorrect CSS grammar or use some proprietary grammar that LESS does not know.

To output such a value, we can add a ~ before the string, for example

 @ie-hack: ~"\9";      //Compatible with ie9~ie6

        div{
          margin-left: 154px@ie-hack;
          *margin-left: -3px;
        }

See the detailed summary of Stu Zhengmei (less, Sass and stylus):
http://www.cnblogs.com/rubylouvre/archive/2013/01/13/2858251.html