Less Quick Start

About Us

In short, less is a tool that allows you to write CSS more easily when designing your Web page.

Description of less official website:

Less adds CSS to the features of dynamic languages, such as variables, inheritance, operations, and functions.

Less can be run on the client (ie 6+, Webkit, Firefox),

You can also run on the server with node. js or Rhino.

In other words, you can use the tools of variables, inheritance, arithmetic, and functions through less syntax,

After compiling, less can be turned into a normal CSS,

So let's design CSS this thing can be more flexible.

Less@color: #4D926F; #header {color: @color;} H2 {color: @color;}

Compiled CSS: #header {color: #4D926F;} H2 {color: #4D926F;}

=====================================

Mixed

Mixins allows you to repeat the use of certain style declarations,

You can include another B class in a style,

All the B class styles are embedded in a style set.

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

So if we now need to introduce those common attribute sets in other classes,

Then we just need to call it in any class like this:

#menu a {color: #111;. bordered;}

Here is the CSS that goes out:

#menu a {color: #111; border-top:dotted 1px black; border-bottom:solid 2px Black;}

===========================================

Mixed with parameters

The best place to do this is to simplify some of the more difficult to write CSS, such as CSS3 's fillet setting,

Currently because the browser syntax is not yet unified, you need to write:

By less, you just write:

. Border-radius (@radius) {

Border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}

Header {

. Border-radius (4PX);

}

. button {

. Border-radius (6PX);

}

=======================================

The main features provided by less

Arguments variable

@arguments contains all the parameters passed in.

For example, shadow settings for CSS3:

. Box-shadow (@x:0, @y:0, @blur: 1px, @color: #000) {  box-shadow: @arguments;  -moz-box-shadow: @arguments;  -webkit-box-shadow: @arguments;}

#nav {     . Box-shadow (2px, 5px);} #nav {  box-shadow:2px 5px 1px #000;  -moz-box-shadow:2px 5px 1px #000;  -webkit-box-shadow:2px 5px 1px #000;}

===============================

Functions & Operations

Often when designing a button or border style, we often need a

The same color as the original. It could be a little brighter, a little darker, or a little brighter.

(For example: as a button general color, hover up color, point down the color).

And this kind of thing, traditionally we used RGB on the palette to set up and then set up in CSS,

But if you have a bit of intuition about the HSB (hue, luminance, saturation),

Less also allows you to set directly with function,

And the output of the CSS, will automatically help you calculate the corresponding RGB. For example:

Less@base-color: #111; @red: #842210; #footer {color: @base-color + #003300;//Saturation reduced 10%border-color:desaturate (@red, 1 0%);}

After conversion css#footer {color: #114411; Border-color: #7d2717;}

======================================

Pattern matching and guidance expressions

In some cases, we want to change the default rendering of a mix based on the parameters passed in, such as the following example:

Less.mixin (Dark, @color) {//Brightness reduction 10%  color:darken (@color, 10%);}. Mixin (light, @color) {//Brightness increase 10%  color:lighten (@color, 10%);}. Mixin (@_, @color) {  display:block;}

Apply to Class

. class {

. Mixin (light, #888);

}

CSS after conversion

. class {

Color: #a2a2a2;

Display:block;

}

==============================================

The specific implementation is as follows:

The first hybrid definition is not matched because it only accepts dark as the primary parameter.

The second hybrid definition is successfully matched because it only accepts light

The third hybrid definition was successfully matched because it accepts any value

Only matched mixes will be used. A variable can match any incoming value,

A fixed value other than a variable matches only the passed-in value that is equal to it.

Guidance

//lightness (@a) extracts the ' Lightness ' value (brightness) from the color value. Mixin (@a) when (Lightness (@a) >= 50%) {  <  %) {  background-color:white;}. Mixin (@a) {  color: @a;}

. Class1 {. mixin (#ddd)}.class2 {. Mixin (#555)}

. class1 {  background-color:black;  Color: #ddd;}. Class2 {  background-color:white;  Color: #555;}

Guidance is useful when we want to match on an expression rather than on values and parameters.

Less Quick Start