CSS--Getting Started with LESS_html/css_WEB-ITnose

Less is a dynamic styling language. Less extends the dynamic behavior of CSS, such as setting variables (Variables), mixed writing modes (mixins), operations (operations) and functions (functions), etc. The best thing is that Less uses existing CSS syntax. In other words, you can directly change your ready-made style file "style.css" to "style.less" and it will work normally. 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 mentioned earlier, Less is an extension of CSS. It is not only backward compatible, but also adds many additional functions based on the existing CSS syntax. If you have a certain foundation of CSS syntax, learning Less will be a breeze, so let’s start now. First, let’s look at a piece of CSS code using 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) }				}			

Maybe you can see this You don't know what these codes mean now? But don’t be nervous, we will explain step by step what these syntaxes mean. If nothing else is said, let’s get moving together.

How to use Less

To successfully use Less, you need the support of a script, which we call less.js. You can click here to download this less script and put it into your project. After downloading, we need to reference less.js into the file. The reference method is very simple:

				<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 exactly does Less have? In fact, I have mentioned this problem before. Less is expanded on the basis of CSS syntax, mainly including: Variables, Mixins, Nested Rules, Functions & Operations, Client-side usage, Server-side usage, etc., as follows We will focus on these parts to better help us understand and learn Less in depth.

1. Variables??Variables

Variables in Less allow you to define commonly used values ​​somewhere in the style, and then apply them to the style, so as long as you change the definition The variable parameter value can achieve the global effect. Let’s look at a piece of code first:

Less Code

				/*======== 定义变量===========*/				@color: #4d926f;				/*======== 应用到元素中 ========*/				#header {					color: @color;				}				h2 {					color: @color;				}			

Compiled Css code:

				/*======= Less 编译成 css ======*/				#header {					color: #4d926f;				}				h2 {					color: #4d926f;				}			

Less The variables in also have calculation 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 "constants" 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 shows that the @color at the end covers the @color at the front.

2. Mixing??Mixins

Mixing is actually a kind of nesting. It allows you to embed one class into another class, and the embedded class is also called a variable. In other words, you can define CSS with a class, and then use the entire class as a variable, embedded in another class as its attribute; in addition, the mixin is also like a function with parameters, as in the following example :

Less Code:

				/*========= 定义一个类 ===========*/				.roundedCorners(@radius:5px) {					-moz-border-radius: @radius;					-webkit-border-radius: @radius;					border-radius: @radius;				}				/*＝＝＝＝＝＝＝＝＝＝ 定义的类应用到另个一个类中 ＝＝＝＝＝＝＝＝＝＝＝*/				＃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: In this way, any CSS class or style under the ID can be used as a variable. Use mixin mode to use it as an attribute value of another element.

Mixin has a term called "Parametric Mixins", as mentioned above. Less has a special type of rule set, that is, a class can be used as an attribute value of another element, and can also accept its own parameters. Let's look at a typical example:

Less Code:

				/*========== 定义一个规则，并且不设置默认参数值 ============*/				.borderRadius(@radius){					-moz-border-radius: @radius;					-webkit-border-radius: @radius;					border-radius: @radius;				}				/*============ 应用到元素中 ============*/				#header {					.borderRadius(10px); /*把10px传给变量@radius*/				}				.btn {					.borderRadius(3px);/*把3px传给变量@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 default values ​​for Mixins parameters, 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 give Mixins no parameters, especially if you want to hide the output CSS rules, but also want to include them in other rules. Attributes, it will be very useful to use Mixins without parameters. Let’s take a 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 have another important variable: @arguments. @arguments is a very special parameter in Mixins. When Mixins refers to this parameter, it will represent all variables. This will be useful when you don’t want to deal with individual parameters. Let’s look at a shadow example:

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: 2px 2px 3px #FF36;					box-shadow: 2px 2px 3px #FF36;				}			

3. Nested Rules??Nested Rules

Nested rules are mainly Regarding the way to write style rules for a multi-layer element, we used to write styles in multi-layer elements, either by selecting them from scratch, or by adding a class name or id name to the element, but in Less we don’t need to do this anymore, we Just use his nested rules to complete, let's look at a simple example:

Html Markup:

				<div id="header">					<h1><a href="">W3cplus</a></h1>					<p>记述前端那些事??引领Web前沿</p>				</div>			

Less Code:

				#header {					display: inline;					float: left;					h1 {						font-size: 26px;						font-weight: bold;						a {							text-decoration: none;							color: #f36;							&:hover {								text-decoration: underline;								color: #63f;							}						}					}					p {						font-size: 12px;					}				}			

Compiled Css Code:

				#header {				    display: inline;				    float: left;				}				#header h1 {				    font-size: 26px;				    font-weight: bold;				}				#header h1 a {				    color: #FF3366;				    text-decoration: none;				}				#header h1 a:hover {				    color: #6633FF;				    text-decoration: underline;				}				#header p {				    font-size: 12px;				}							

Use Less’s nesting rules to make your CSS code more concise, because its writing method is written to imitate the DOM structure of HTML.

从上在的实例代码中，我都很清楚的了解到，嵌套规则可以让我们写样式时能像DOM树形那样有结构的去写代码，从而减了选择器的层级关系，更主要的是这样使用我们的代码更简洁，更具有阅读生，这种嵌套规则对我们操作伪元素更为方便和重要，如:hover，:link,:focus等，他的写法是：

Less Code:

				a {					color: red;					text-decoration: none;					&:hover {						color: blue;						text-decoration: underline;					}				}			

Compiled Css Code:

				a {					color: red;					text-decoration: none;				}				a:hover {					color: blue;					text-decoration: underline;				}			

大家注意了，这里的&很重要，在Less中嵌套书写中有没有&区别是完全不一样的效果，有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素，我们一起来看一段代码：

Less Code:

				#header {					&.fl{						float: left;					}					.mln {						margin-left: 0;					}				}			

Compiled Css Code:

				#header.fl{float: left;}				#header .mln {margin-left: 0;}			

4、Functions & Operations

这两个功能很有意思的。在我们平时的样式中，有很多元素的属性都具有一定的比例或倍数。那么这两个刚好可以帮我们实现这方面的功能，首先来看Operations（直译“动作”）他可以让你对元素的属性值，颜色进行四则运算：加、减、乘、除。而Function就像javascript中的function一样可以让你进行你想要的值的操作。下面我们先来看一个简单的实例：

Less Code:

				@the-border: 1px;				@base-color: #111;				@red: #842210;				#header {					color: @base-color *3;					border: 1px solid desaturate(@red,100%);					border-width: @the-border @the-border*2 @the-border*3 @the-border;									border-color:desaturate(@red,100%) @red lighten(@red, 10%)	darken(@red, 30%);					}			

Compiled Css Code:

				#header {					color: #333;					border: 1px solid #4a4a4a;					border-width: 1px 2px 3px 1px;					border-color: #4A4A4A #842210 #B12E16 #000000;				}			

这里提出一点，Less中的Operations主要是针对任何数字、颜色、变量的操作，可以对其是行加、减、、乘、除或者更复杂的综合运算；而Functions主要是针对Color funtions，Less提供了多种变换颜色的功能，下面多们来俱体看一下这两个功能的使用。

先来看Operation的使用

Less Code:

				@base: 5%;				@filler: @base*2;				@other: @base + @filler;				#header {					color: #888 / 4;					height: 100% / 2 + @filler; 				}			

Compiled Css Code:

				#header {				    color: #222222;				    height: 60%;				}			

上面是一些简单的四则运算，他们都是在同一单位下进行操作，现在我们一起来看一个不同单位的操作

Less Code:

				@var: 1px + 5;				#header {					border: @var solid red;				}			

Compiled Css Code:

				#header {				    border: 6px solid red;				}			

上面的代码直接反应出了，“@var: 1px + 5”，Less最终解析的值是“6px”。在Less中我们同样可以像做小学算术一样，使用括号“（）”来改变其运算的先后顺序，如：

Less Code:

				@var: 20px;				#header {					width: @var + 5 * 2;					height: (@var + 5 ) * 2;				}			

Compiled Css Code:

				#header {				    height: 50px;				    width: 30px;				}			

从结果中我们很明显的得出他们的区别

					@var: 20px;					#header {						width: @var + 5 * 2;/* 先计算了5 * 2 = 10 然后在计算了 @var + 10 = 30px,其实就是"@var+(5*2)"*/						height: (@var + 5 ) * 2;/*先计算了(@var + 5) = 25px,然后在计算了25*2=50px，因为括号更具有优先权，小学数学题*/					}				

Less中还提供了一个Color Functions，他具有多种变换颜色的功能，先把颜色转换成HSL色，然后在此基础上进行操作，具体包括以下几种：

					lighten(@color, 10%);     // return a color which is 10% *lighter* than @color					darken(@color, 10%);      // return a color which is 10% *darker* than @color					saturate(@color, 10%);    // return a color 10% *more* saturated than @color					desaturate(@color, 10%);  // return a color 10% *less* saturated than @color					fadein(@color, 10%);      // return a color 10% *less* transparent than @color					fadeout(@color, 10%);     // return a color 10% *more* transparent than @color					spin(@color, 10);         // return a color with a 10 degree larger in hue than @color					spin(@color, -10);        // return a color with a 10 degree smaller hue than @color									

使用这种functions方法很简单：

Less Code:

					@base: #f04615;					#header {						color: @base;						background-color: fadein(@base, 10%);						h1 {							color: lighten(@base,20%);							background-color: lighten(fadeout(@base,20%),5%);							a {								color: darken(@base,50%);								background-color: spin(@base,10);								&:hover {									color: saturate(@base,30%);									background-color: fadein(spin(@base,-5),20%);								}							}						}						p {							color: desaturate(@base,60%);						}					}									

Compiled Css Code:

					#header {					    background-color: #F04615;					    color: #F04615;					}					#header h1 {					    background-color: rgba(242, 89, 45, 0.8);					    color: #F69275;					}					#header h1 a {					    background-color: #F06B15;					    color: #060200;					}					#header h1 a:hover {					    background-color: #F03415;					    color: #FF3E06;					}					#header p {					    color: #A56F60;					}				

大家还可以通过这样的方式提取颜色值

					hue(@color);        // returns the `hue` channel of @color					saturation(@color); // returns the `saturation` channel of @color					lightness(@color);  // returns the 'lightness' channel of @color				

下面我们来看一下如何取得他的颜色

Less Code:

					@color: #f36;					#header {						background-color: hsl(hue(@color),45%,90%);					}				

Compiled Css Code:

					#header {					    background-color: #F1DAE0;					}				

5、命名空间??Namespaces

有时候你想把一些变量或mixins组织起来，并将他封装，想用的时候就把要关的一部分取出来，那么我们将在前面的mixins基础上将其功能扩展，比如说我们有一个这样的库：

					#bundle {					  .button () {					    display: block;					    border: 1px solid black;					    background-color: grey;					    &:hover { background-color: white }					  }					  .tab { ... }					  .citation { ... }					}				

现在在实际操作中，我们header中的a样式和.button一样，那么我们就可以这样操作：

					#header a {					  color: orange;					  #bundle > .button;					}				

换过一种思维来说，如果页面上有几个部分的样是完全一样的，或者只是部分不同，我们就可以这样来写，就如上面的代码，#bundle可是以web页面中已存在的元素，然后#header中的a元素和#bundle中的.button样式是一样的，那么我们就可以把#bundle中 .button的所有样式引用到#header中的a元素上。

6、变量范围??Scope

Less中的变量和别的程序语言一样，他的变量也有一个范围概念，这个概念就有点像局部变量和全局变量一样，只是在Less中采取的是就近原则，换句话说，元素先找本身有没有这个变量存在，如果本身存在，就取本身中的变量，如果本身不存在，就寻找父元素，依此类推，直到寻找到相对应的变量，我们来看个简单的实例：

					@var: red;					#page {					  @var: white;					  #header {					    color: @var; // white					  }					}					#footer {					  color: @var; // red  					}				

7、Less的注解??Comments

Less中的注解有两种方式，单行注解很像js中的，如：

					// Hi, I'm a silent comment, I won't show up in your CSS					.class { color: white }				

Less中的多行注解和使用css中的一样：

					/* Hello, I'm a 					 CSS-style comment				 */					.class { color: black }				

当然单行注解也可以使用css的方式注解，本人更强调使用css中的注解方式：

					/* Hello, I'm a CSS-style comment */					.class { color: black }				

8、客户端的使用??Client-side usage

客户端的使用其实好简单，我们最开始引用的就是客户端的使用方法，使用这种方法前提条件是需要一个less.js的脚本支持，大家可以先到点击下载less.js然后把他引用到页面的head中，如下所示：

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

其中src所指定的路径是你项目中的相对路径，当然你也可以把这个js放到你认为安全可用的服务器上，换成绝对路径也是可以的。接着我们就需要把less文件引进到项目中，这个引入的方式和css方式是一样的，只是有一点点不同，css中的是“rel="stylesheet"”而less的却是“rel="stylesheet/less"”,请看下面的代码：

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

特别强调一点，客户端使用Less,一定要注意，“Less样式文件一定要放在less脚本文件之前”。

正确的引入方式：

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

错误的引入方式：

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

上在我分了八个部分介绍了Less，其实Less不只包含这些东西，他还包括了“服务器端的使用”，“导入文件和变量”，“字符串插值”等，由于这几个部分相对而言较少使用，加上我自己没有完全理解，特意截下这几个部分不做陈述，如果大家相完全了解或者更清楚的学习他，大家可以可击到他的官网。（不过要翻墙才能正常阅读。）