通过开源文档学LESS系列3

1.引言

通过开源文档学LESS系列1，我们通过一个经典的LESS Mixins集preboot，学习了LESS的基础知识，包括变量、注释、混合和混合的参数等，详见通过开源文档学LESS系列1。

通过开源文档学LESS系列2，通过tRRtoolbelt.less的代码解读来学习LESS，主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译等，详见通过开源文档学LESS系列2。

本教程通过解读css effects项目源码来继续学习LESS。首先看看该项目的DEMO，集成了很多常见的动画、阴影等效果。

2.代码解读

该项目采用import的方式进行文件组织，src下有css-effects.less、animations.less、box-shadow.less、icons.less、mixins.less等文件组成。css-effects.less文件是主文件，里面导入animations、box-shadow、icons三个效果文件，mixins.less是该项目用到的常规mixin集合。

首先看看css-effects.less

//css-effects.less

@import 'src/animations';
@import 'src/icons';
@import 'src/box-shadow';

非常简单导入效果文件，然后我们重点看看animation效果文件。

//animations.less
@import "mixins";

.animation-ellipsis(){
	overflow:hidden;
	display: inline-block;
	vertical-align: top;
	font-size:inherit;
	text-align:right;
	width:1em;

	.animate(ellipsis 1s ease infinite alternate);

	&:after{
		content:"...";
		overflow:hidden;
		display: inline-block;
	}

	.anim-ellipsis(){
		from {width:0;}
		to {width: 2em;}
	}

	@-webkit-keyframes ellipsis{
		.anim-ellipsis();
	}
	@-moz-keyframes ellipsis{
		.anim-ellipsis();
	}
	@-ms-keyframes ellipsis{
		.anim-ellipsis();
	}
	@keyframes ellipsis{
		.anim-ellipsis();
	}

}

导入mixins.less之后，是一个动画的定义。

2.1 import

import命令用来导入一个另外的文件，在标准css中@import命令必须在所有命令之前，在LESS中不强求放在文件开头。但是作为良好的开发习惯，强烈建议放到文件开头。

//@import的几种格式
//导入less文件
@import "mixins.less";
//如果导入的是less文件，则扩展名可以缺省
@import "mixins"
//也可以导入其他格式的文件，如果是.css,会按照css文件处理，如果是其他格式,将会认为是LESS文件
@import "style.css"
@import "some.php"

另外LESS提供了“导入关键字”可以允许多种方式使用外部文件。使用导入关键字（Import Options ）的语法如下

Syntax:
 @import (keyword) "filename";

现在的导入关键字有以下这些：

• reference: use a less file but do not output it----使用该less文件但是不输出
• inline: include the source file in the output but do not process it----在输出中包含该less文件，但是不做处理
• less: treat the file as a less file, no matter what the file extension----不管是什么扩展名的外部文件，统统认做less处理
• css: treat the file as a css file, no matter what the file extension----不管是什么扩展名的外部文件，统统认做css处理
• once: only include the file once (this is default behavior)----引入该外部文件一次(缺省值)
• multiple: include the file multiple times----多次引入该外部文件

好的，继续来看animation效果文件

.animation-mexican(){
	overflow:hidden;
	display: inline-block;
	text-align:center;

	b{
		display: inline-block;
		.animate(mexican 1s 0.0s ease-in-out infinite alternate);

		&:after{
			content: ".";
		}
	}

	@iterations:10;

	.loop(@iterations);

	// Looping generator
	.loop (@index) when (@index>0){
		b:nth-child( @{iterations}n + @{index} ){
			.animate-delay( (@index/10) * 1s);
		}
		.loop((@index - 1));
	}


	// Animation
	//
	.anim-mexican(){
		80% {
			.transform(translateY(0));
		}
		to {
			.transform(translateY(-0.3em));
		}
	}

	@-webkit-keyframes mexican{
		.anim-mexican();
	}
	@-moz-keyframes mexican{
		.anim-mexican();
	}
	@-ms-keyframes mexican{
		.anim-mexican();
	}
	@keyframes mexican{
		.anim-mexican();
	}
}

这个动画mixin我们需要重点关注LESS循环的实现。

2.2 循环

@iterations:10;
// 循环的定义，利用when实现循环的条件判断，利用.loop((@index - 1))实现下次循环
.loop (@index) when (@index>0){
	b:nth-child( @{iterations}n + @{index} ){
		.animate-delay( (@index/10) * 1s);
	}
	.loop((@index - 1));
}

// 循环的使用
.loop(@iterations);

再来看个例子，循环体里还可以使用循环指针作为变量。

// Looping generator
.loop (@index) when (@index>0){
	b:nth-child(@{iterations}n + @{index}){
		@rotate:@index*@degrees;
		.transform(rotate( -@rotate ), 0 0 );
	}
	.loop(@index - 1);
}

3.总结与展望

本教程对 css effects进行了代码解析，主要讲解了LESS中的import、循环等知识。

系列教程还在继续，敬请期待。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------