Css--less Getting Started

Less is a dynamic style language. Less extends the dynamic behavior of CSS, such as setting variables (Variables), mixed write mode (mixins), Operations (operations), and functions (functions), and, best of all, less uses the existing CSS syntax, which means You can directly change your ready-made style file "Style.css" directly to "style.less", he can also work properly. Such as:

				<link rel= "stylesheet/less" href= "less/style.less"/>
			

Less can now run on clients (such as: Ie+,webkit,firefox) and servers such as node. js. As I said earlier, less is an extension of CSS, not only backwards compatible, but also adds a lot of extra functionality to the existing CSS syntax. If you have a certain base of CSS syntax, learning less will be a breeze, then let's start now, first look at a section of the CSS code with less syntax:

				. Box-shadow (@x:0, @y:0, @blur: 1px, @alpha) {
				  @val: @x @y @blur rgba (0, 0, 0, @alpha);
				  Box-shadow:         @val;
				  -webkit-box-shadow: @val;
				  -moz-box-shadow:    @val;
				}
				. box {@base: #f938ab;
				  Color:        saturate (@base, 5);
				  Border-color:lighten (@base, 30%);
				  div {. Box-shadow (0, 0, 5px, 0.4)}
				}
			

See here maybe you don't know what the code means right now. But don't be nervous, we'll step-by-step to explain what these grammars mean. Let's move on together, if you don't say anything else. How to use less

To successfully use less, a script is required to support this script, which we call less.js. You can download this less script here and put it in your project. After downloading, we need to refer the less.js to the file in a simple way:

				<link rel= "stylesheet/less" type= "Text/css" href= "less/styles.less" >
				<script src= "Js/less.js" type= " Text/javascript "></script>				
			

what does less contain.

What is less specific? In fact, I have already said in front of this question, less to CSS syntax based on the expansion, mainly include: Variables,mixins, Nested Rules, Functions & Operations, Client-side Usage, server-side usage, and so on, let's focus on these sections to help us learn less and learn more in depth.

1. Variable--variables

The variable in less allows you to define a commonly used value somewhere in the style, and then apply it to the style so that you can change the global effect by changing the value of the variable you define, and we'll start by looking at a piece of code:

Less Code

				/*======== define variable ===========*/
				@color: #4d926f;
				/*======== applied to the element ========*/
				#header {
					color: @color;
				}
				H2 {
					color: @color;
				}
			

Compiled CSS Code:

				/*======= less compiled into CSS ======*/
				#header {
					color: #4d926f;
				}
				H2 {
					color: #4d926f;
				}
			

The variables in less also have computational functions, such as:

Less Code:

				@nice-blue: #5b83ad;
				@light-blue: @nice-blue + #111;
				#header {
					color: @light-blue;
				}
			

Compiled Css Code:

				#header {color: #6c94be;}
			

We can also define a variable named variable, such as

Less Code:

				@color: #253636;
				@highlight: "Color";
				#header {color: @ @highlight;}
			

Compiled Css Code:

				#header {color: #253636;}
			

Note: The variables in less are actually a "constant" because they can only be defined once.

Less Code:

				@color: #253636;
				@highlight: "Color";
				@color: #ff3636;
				#header {color: @ @highlight;}
			

Compiled Css Code:

				#header {color: #ff3636;}
			

The above code clearly illustrates that the @color covered the previous @color.

2, mixed with--mixins

Mixing is actually a nesting, it allows you to embed a class into another class, and the embedded class is also called a variable. In other words, you can define CSS with a class, then use the whole as a variable, embed it in another human as his property, and in addition it is like a functions with parameters, as in the following example:

Less Code:

				/*========= defines a class ===========*/
				. RoundedCorners (@radius: 5px) {
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					Border-radius: @radius;
				}
				/*========== defined classes are applied to another class ===========*/
				#header {
					. roundedcorners;
				}
				#footer {
					. roundedcorners (10px);
				}
			

Compiled Css Code:

				#header {
					-moz-border-radius:5px;
					-webkit-border-radius:5px;
					border-radius:5px;
				}
				#footer {
					-moz-border-radius:10px;
					-webkit-border-radius:10px;
					border-radius:10px;
				}
			

Note: Such a style under any CSS class or ID can be used as a variable, using mixed mode as the property value of another element.

Mixing (Mixin) has a noun called "mixed parameter (parametric mixins)", which is also said above. Less has a special type of rule set, that is, a class can be treated as a native value of another element, and can also accept its own parameters, let's look at a typical example:

Less Code:

				/*========== defines a rule and does not set the default parameter value ============*/
				. Borderradius (@radius) {
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					Border-radius: @radius;
				}
				/*============ is applied to the element ============*/
				#header {
					. Borderradius (10px);/* Pass 10px to the variable @radius*/
				}
				. btn {
					. Borderradius (3PX);/* Pass 3px to variable @radius*/
				}
			

Compiled Css Code:

				#header {
					-moz-border-radius:10px;
					-webkit-border-radius:10px;
					border-radius:10px;
				}
				
				. btn {
					-moz-border-radius:3px;
					-webkit-border-radius:3px;
					border-radius:3px;
				}
			

We can also define a one-person default value for the Mixins parameter, such as

Less Code:

				. Borderradius (@radius: 5px) {
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					Border-radius: @radius;
				}
				
				. btn {
					. Borderradius;
				}
			

Compiled Css Code:

				. btn {
					-moz-border-radius:5px;
					-webkit-border-radius:5px;
					border-radius:5px;
				}
			

Another way is to mixins me any parameters, especially if you want to hide the output of the CSS rules, but also want to include his attributes in other rules, using this mixins with no parameters will be very useful, let's look at a piece of code:

Less Code:

				. Wrap () {
					text-wrap:wrap;
					White-space:pre-wrap;
					White-space:-moz-pre-wrap;
					Word-wrap:break-word;
				}
				Pre {
					. Wrap;
				}
			

Compiled Css Code:

				Pre {
					text-wrap:wrap;
					White-space:pre-wrap;
					White-space:-moz-pre-wrap;
					Word-wrap:break-word;
				}
			

Mixins also has an important variable: @arguments. @arguments in Mixins is a very special parameter, when mixins refers to this parameter, he will represent all the variables, when you do not want to deal with individual parameters, this will be useful, we look at a shadow instance:

Less Code:

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

Compiled Css Code:

				#header {
					-moz-box-shadow:2px 2px 3px #FF36;
					-webkit-box-shadow:2</