通过开源文档学LESS系列3

亦凉 2022-08-24 14:21 98阅读 0赞

## 1.引言 ##

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

通过开源文档学LESS系列2，通过[tRRtoolbelt.less][]的代码解读来学习LESS，主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译等，详见[通过开源文档学LESS系列2][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前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[LESS_1]: http://blog.csdn.net/whqet/article/details/18960829
[tRRtoolbelt.less]: https://github.com/therebelrobot/tRRtoolbelt.less
[LESS_2]: http://blog.csdn.net/whqet/article/details/18966427
[css effects]: https://github.com/MrSwitch/css-effects
[DEMO]: http://adodson.com/css-effects/#demos