通过开源文档学LESS系列2

最新推荐文章于 2021-02-28 18:05:00 发布

whqet

最新推荐文章于 2021-02-28 18:05:00 发布

阅读量3k

点赞数 2

分类专栏： less&sass 文章标签： less css less教程前端开发

本文链接：https://blog.csdn.net/whqet/article/details/18966427

版权

技术总结同时被 3 个专栏收录

59 篇文章 0 订阅

订阅专栏

案例研究

52 篇文章 0 订阅

订阅专栏

less&sass

31 篇文章 0 订阅

订阅专栏

1.引言

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

我们继续第二部分，通过tRRtoolbelt.less的代码解读来学习LESS。

tRRtoolbelt.less是由Trent Oswald开发的一个便用日常应用的LESS mixinis和function集（handy LESS-CSS mixins and functions for common actions）。

2.代码解读

还是先看注释

/* ******************************

tRRtoolbelt.less

handy LESS-CSS mixins and functions for common actions

Dependencies:
	LESScss
	
Developed by Trent Oswald <trentoswald@therebelrobot.com>

For available functions, search (<ctrl>+f) for @FUNCTIONS

****************************** */

// Copyright (c) 2013 

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

注释里介绍了该项目的一些基本情况，简洁、开发者、版权等。

接着是关于颜色的变量

/*==================================
=            @COLORS            =
==================================*/

@black: #000000;
@white: #ffffff;
@gray: #a0a0a0;

@red: #aa0000;
@green: #00aa00;
@blue: #0000aa;

@yellow: #aaaa00;
@cyan: #00aaaa;
@magenta: #aa00aa;

// Social Media gradient colors
@facebook-1: #3066a2;
@facebook-2: #14427e;
@facebook-toolbar:#7A8EB8;

@twitter-1: #1d95c9;
@twitter-2: #0a68ae;

@weibo-1: #254555;
@weibo-2: #0F1D23;

@renren-1: #387BB5;
@renren-2: #31679C;

字体的一些变量设置

/*==================================
=            @FONTS            =
==================================*/

/*serif*/
@georgia: Georgia, serif;
@palatino: "Palatino Linotype", "Book Antiqua", Palatino, serif;
@times: "Times New Roman", Times, serif;

/*sans-serif*/
@arial: Arial, Helvetica, sans-serif;
@arialThin: "Arial Black", Gadget, sans-serif;
@impact: Impact, Charcoal, sans-serif;
@lucida: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
@tahoma: Tahoma, Geneva, sans-serif;
@trebuchet: "Trebuchet MS", Helvetica, sans-serif;
@verdana: Verdana, Geneva, sans-serif;

/*monospace*/
@mono1: "Courier New", Courier, monospace;
@mono2: "Lucida Console", Monaco, monospace;

接下去是函数部分

/*==================================
=            @FUNCTIONS            =
==================================*/

/**
	These functions are utilizing namespacing. They are called as the following:
		#tRRt > #reset > .meyer; - for meyer reset css
		#tRRt > #rounded > .all(5px) - for a 5px rounded corner

		#tRRt > #functions > #ratio outputs a new variable, either @rw or @rh, standing for ratio-calculated-width and ration-calculated-height.
		This allows you to use the new value wherever needed.

	If you would like additional functions added, feel free to fork and make a pull request on github.
**/


// Basic Functions - completely self-contained functions

@PIElocation: 'PIE.htc';
#tRRt{
	#reset {
		.meyer () {
			/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
			html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
			a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
			strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
			label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
			details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
			section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;
			vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,
			figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}
			ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,
			q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
		}
		.html5doctor () {
			/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
			html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,
			cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,
			ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
			aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,
			time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;
			vertical-align:baseline;background:transparent}body{line-height:1}article,aside,
			details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul
			{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,
			q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;
			background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}
			mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}
			abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;
			border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;
			margin:1em 0;padding:0}input,select{vertical-align:middle}
		}
		.yui3 () {
			/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
			html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
			code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
			table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,
			cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}
			caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,
			q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}
			sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;
			font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
			#yui3-css-stamp.cssreset{display:none}
		}
		.uniselector () {
			/* cssreset.com */
			*{margin:0;padding:0;}
		}
		.normalize () {
			/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
			html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:0.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}
		}
		.vanilla () {
			/** Vanilla CSS 1.0.2 - http://cssreset.com */ 
			body{font:9pt/1.5em sans-serif;}pre,code,tt{font:1em/1.5em 'Andale Mono','Lucida Console',monospace;}h1,
			h2,h3,h4,h5,h6,b,strong{font-weight:bold;}em,i,dfn{font-style:italic;}dfn{font-weight:bold;}p,code,pre,
			kbd{margin:0 0 1.5em 0;}blockquote{margin:0 1.5em 1.5em 1.5em;}cite{font-style:italic;}li ul,li ol{margin:0 1.5em;}
			ul,ol{margin:0 1.5em 1.5em 1.5em;}ul{list-style-type:disc;}ol{list-style-type:decimal;}ol ol{list-style:upper-alpha;}
			ol ol ol{list-style:lower-roman;}ol ol ol ol{list-style:lower-alpha;}dl{margin:0 0 1.5em 0;}
			dl dt{font-weight:bold;}dd{margin-left:1.5em;}table{margin-bottom:1.4em;width:100%;}th{font-weight:bold;}th,
			td,caption{padding:4px 10px 4px 5px;}tfoot{font-style:italic;}sup,sub{line-height:0;}abbr,
			acronym{border-bottom:1px dotted;}address{margin:0 0 1.5em;font-style:italic;}del{text-decoration:line-through;}
			pre{margin:1.5em 0;white-space:pre;}img.centered,.aligncenter,div.aligncenter{display:block;margin-left:auto;
			margin-right:auto;}img.alignright{display:inline;}img.alignleft{display:inline;}.alignright{float:right;
			margin-left:10px;}.alignleft{float:left;margin-right:10px;}img { max-width: 100%; }* html .clearfix{height:1%;}
			*+html .clearfix{display:inline-block;}.clearfix:after{content:".";display:block;height:0;clear:both;
			visibility:hidden;}* html .group{height:1%;}*+html .group{display:inline-block;}.group:after{content:".";
			display:block;height:0;clear:both;visibility:hidden;}
		}
	}
}

tRRtoolbelt.less在函数部分使用了LESS命名空间，从而提高代码的层次感与可读性。

2.1命名空间

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，然后可以重复使用。例如，

#tRRt{
	#reset {
		.meyer () {
			/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
			/*具体内容省略*/
		}
		.html5doctor () {
			/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
			/*具体内容省略*/
		}
		.yui3 () {
			/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
			/*具体内容省略*/
		}
		.uniselector () {
			/* cssreset.com */
			*{margin:0;padding:0;}
		}
		.normalize () {
			/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
			/*具体内容省略*/
		}
		.vanilla () {
			/** Vanilla CSS 1.0.2 - http://cssreset.com */ 
			/*具体内容省略*/
		}
	}
}

定义了一个命名空间，里面包含CSS reset和normalize的常见方法。然后我们就可像下面这样来调用这些方法。

.some{
	//调用meyer的重置
	#tRRt > #reset > .meyer;
}

2.2作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。

好的，接着来看文档

#functions {
	#ratio {
		.width (@h,@ow,@oh){
			@rw: @h * (@ow/@oh);
		}
		.height (@w,@ow,@oh){
			@rh: @w * (@oh/@ow);
		}
	}
}
#position {
	.tl (@x:0px,@y:0px,@z:1,@type: absolute){
		position:@type;
		left:@x;
		top:@y;
		z-index:@z;
	}
	.tr (@x:0px,@y:0px,@z:1,@type: absolute){
		position:@type;
		right:@x;
		top:@y;
		z-index:@z;
	}
	.bl (@x:0px,@y:0px,@z:1,@type: absolute){
		position:@type;
		left:@x;
		bottom:@y;
		z-index:@z;
	}
	.br (@x:0px,@y:0px,@z:1,@type: absolute){
		position:@type;
		right:@x;
		bottom:@y;
		z-index:@z;
	}
}
#bg {
	.color (@color,@fade:50){
		background-color:fade(@color,@fade); 
	}
	#image {
		#stretch{
			.all (@file,@pos: center center,@repeat: no-repeat){
				background-image:url(@file);
				-webkit-background-size:100% 100%;
				background-size:100% 100%;
				background-position:@pos;
				background-repeat:@repeat;
			}
			.x (@file,@pos: center center,@repeat: no-repeat){
				background-image:url(@file);
				-webkit-background-size:100%;
				background-size:100%;
				background-position:@pos;
				background-repeat:@repeat;
			}
			.y (@file,@pos: center center,@repeat: no-repeat){
					background-image:url(@file);
					-webkit-background-size: auto 100%;
					background-size: auto 100%;
					background-position:@pos;
					background-repeat:@repeat;
			}
		}	
		.cover (@file,@pos: center center,@repeat: no-repeat){
			background-image:url(@file);
			-webkit-background-size:'cover';
			background-size:'cover';
			background-position:@pos;
			background-repeat:@repeat;
		}
		.contain (@file,@pos: center center,@repeat: no-repeat){
			background-image:url(@file);
			-webkit-background-size:'contain';
			background-size:'contain';
			background-position:@pos;
			background-repeat:@repeat;
		}
	}
}

这里定义了几个对象，他们仍然属于顶级对象#tRRt，只是为了简化书写，列出了中间部分。

#gradient{
	.h (@startColor: #EEE, @endColor: #FFF){
		background-color: @endColor;
		background-image: -webkit-gradient(linear, left center, right center, from(@startColor),to(@endColor));
		background-image: -webkit-linear-gradient(left, @startColor, @endColor);
		background-image: -moz-linear-gradient(left, @startColor, @endColor);
		background-image: -o-linear-gradient(left, @startColor, @endColor);
		background-image: linear-gradient(left, @startColor, @endColor);
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='%d', EndColorStr='%d')", @startColor, @endColor));
		
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			-pie-background: linear-gradient(to right,@startColor, @endColor);
			behavior: url(@PIElocation);
		}
	}
	.v (@startColor: #EEE, @endColor: #FFF){
		background-color: mix(@startColor, @endColor, 60%);
		background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
		background-image: -webkit-linear-gradient(top, @startColor, @endColor);
		background-image: -moz-linear-gradient(top, @startColor, @endColor);
		background-image: -o-linear-gradient(top, @startColor, @endColor);
		background-image: linear-gradient(top, @startColor, @endColor);
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='%d', EndColorStr='%d')", @startColor, @endColor));
		
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			-pie-background: linear-gradient(to bottom,@startColor, @endColor);
			behavior: url(@PIElocation);
		}
	}
	.v3 (@startColor: #00b3ee, @middleColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f){
		background-color: mix(@middleColor, @endColor, 80%);
		background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), color-stop(@colorStop, @middleColor), to(@endColor));
		background-image: -webkit-linear-gradient(@startColor, @middleColor @colorStop, @endColor);
		background-image: -moz-linear-gradient(top, @startColor, @middleColor @colorStop, @endColor);
		background-image: -o-linear-gradient(@startColor, @middleColor @colorStop, @endColor);
		background-image: linear-gradient(@startColor, @middleColor @colorStop, @endColor);
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='%d', endColorstr='%d')", @startColor, @endColor));
	}
	.v4 (@startColor: #B0BAC5, @middleColor1: #9DA7B2, @middleColor2: #919CA8, @endColor: #7E8A98){
		background: mix(@middleColor1, @middleColor2, 50%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(50%, @middleColor1), color-stop(51%, @middleColor2), color-stop(100%, @endColor));
		background-image: -webkit-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
		background-image: -moz-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
		background-image: -o-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
		background-image: linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
	}
	.radial (@innerColor: #EEE, @outerColor: #FFF){
		background-color: @outerColor;
		background-image: -webkit-gradient(radial, 50% 50%, 200, 50% 50%, 20, from(@outerColor), to(@innerColor));
		background-image: -webkit-radial-gradient(50% 50%, @innerColor, @outerColor);
		background-image: -moz-radial-gradient(50% 50%, @innerColor, @outerColor);
		background-image: -o-radial-gradient(50% 50%, @innerColor, @outerColor);
		background-image: radial-gradient(50% 50%, @innerColor, @outerColor);
	}
	.angle (@startColor: #555, @endColor: #333, @degrees: 45){
		background: @endColor;
		background-image: -webkit-gradient(linear, ~"@{degrees}deg", from(@startColor), to(@endColor));
		background-image: -webkit-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		background-image: -moz-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		background-image: -o-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		background-image: linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			-pie-background: linear-gradient(~"@{degrees}deg",@startColor, @endColor);
			behavior: url(@PIElocation);
		}
	}
}
#shadow{
	.text(){

	}
	#box{
		.in(@x:1px, @y:1px, @spread:2px, @color:#000){
			@params: inset @x @y @spread @color;
			-webkit-box-shadow: @params;
			-moz-box-shadow: @params;
			box-shadow: @params;
			.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
				behavior: url(@PIElocation);
			}
		}
		.out(@x:1px, @y:1px, @spread:2px, @color:#000){
			@params: @x @y @spread @color;
			-webkit-box-shadow: @params;
			-moz-box-shadow: @params;
			box-shadow: @params;
			.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
				behavior: url(@PIElocation);
			}
		}
		.multi (@values: "1px 1px 2px #000, 0 0 4px #fff, inset 1px 3px 2px #000") { /* for multi values */
			-webkit-box-shadow: e(@values);
			-moz-box-shadow: e(@values);
			box-shadow: e(@values);
			.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
				behavior: url(@PIElocation);
			}
		}
	}
}
#rounded{
	.all(@radius: 5px){
		-webkit-border-radius: @radius;
		-moz-border-radius: @radius;
		border-radius: @radius;
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			behavior: url(@PIElocation);
		}
	}
	.tl (@radius: 5px){
		-webkit-border-top-left-radius: @radius;
		-moz-border-top-left-radius: @radius;
		border-top-left-radius: @radius;
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			behavior: url(@PIElocation);
		}
	}
	.tr (@radius: 5px){
		-webkit-border-top-right-radius: @radius;
		-moz-border-top-right-radius: @radius;
		border-top-right-radius: @radius;
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			behavior: url(@PIElocation);
		}
	}
	.bl (@radius: 5px){
		-webkit-border-bottom-left-radius: @radius;
		-moz-border-bottom-left-radius: @radius;
		border-bottom-left-radius: @radius;
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			behavior: url(@PIElocation);
		}
	}
	.br (@radius: 5px){
		-webkit-border-bottom-right-radius: @radius;
		-moz-border-bottom-right-radius: @radius;
		border-bottom-right-radius: @radius;
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			behavior: url(@PIElocation);
		}
	}
}

分别定义了渐变、阴影和圆角。这里需要特别注意的是，针对ie的低版本使用了 CSS3 PIE解决问题。

//使用pie解决低版本IE的兼容问题
.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
	-pie-background: linear-gradient(to right,@startColor, @endColor);
	behavior: url(@PIElocation);
}

.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
	behavior: url(@PIElocation);
}

tRRtoolbelt.less的最后一段代码

.opacity(@opacity: 0.5) when (isnumber(@opacity)) and not (@opacity < 0) and not (@opacity > 1) {
	zoom: 1;
	opacity: @opacity;
	filter: e(%("alpha(opacity=%d)", @opacity*100));
}
.box(@w:100%, @h:100%, @type:block){
	display: 	@type;
	width: 		@w;
	height: 	@h;
	.box-sizing(content-box);
}
.trans(@time:1s,@which:all,@how:ease-in-out){
	-webkit-transition: @which @time @how;
	-moz-transition: 		@which @time @how;
	-o-transition: 			@which @time @how;
	transition: 				@which @time @how; 

	/*Force hardware rendering (smooth the transitions)*/
	-moz-transform: translateZ(0px);
	-webkit-transform: translateZ(0px);
	-o-transform: translateZ(0px);
	-ms-transform: translateZ(0px);
	transform: translateZ(0px);
}
.cursor(@url,@x:0,@y:0,@IE,@fallback){
	.modern & {
		cursor: url(@url) @x @y, 
		@fallback;       /* Older browsers                         */
	}
	.lt-ie9 & {
		cursor: url(@IE),     
		@fallback;     /* In case IE can't load the above.       */
	}
}
.resize(@direction: both) { /* ( horizontal | vertical | both ) */
	resize: @direction;
	overflow: auto;
}
.hide-text() {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.prevent-select() {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.clearfix() {
	*zoom: 1;
	&:before, &:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
}
.box-sizing(@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

这里重点注意.opacity中的多条件判断

2.3多条件判断

.opacity(@opacity: 0.5) when (isnumber(@opacity)) and not (@opacity < 0) and not (@opacity > 1) {
	zoom: 1;
	opacity: @opacity;
	filter: e(%("alpha(opacity=%d)", @opacity*100));
}

多个条件的逻辑运算，利用“and”、“not”关键字实现与、非。

2.4 类型判断函数

LESS中还可以利用“is~”的判断函数进行条件判断，LESS中提供了下列判断函数。

iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

2.5 字符串插值

变量可以用像 @{varname} 这样的结构，以类似 ruby 和 php 的方式嵌入到字符串中。例如

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

2.6 避免编译

我们可以在不想编译的字符串前加“~”实现避免编译。例如

#gradient{
	.angle (@startColor: #555, @endColor: #333, @degrees: 45){
		background: @endColor;
                //注意@degrees变量的使用，需要字符串插值和避免编译。
		background-image: -webkit-gradient(linear, ~"@{degrees}deg", from(@startColor), to(@endColor));
		background-image: -webkit-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		background-image: -moz-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		background-image: -o-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		background-image: linear-gradient(~"@{degrees}deg", @startColor, @endColor);
		
		.lt-ie9 &, .lt-ie8 &, .lt-ie7 & {
			-pie-background: linear-gradient(~"@{degrees}deg",@startColor, @endColor);
			behavior: url(@PIElocation);
		}
	}
}

通常书写ie属性的时候经常用到避免编译。

3.总结与展望

本教程对tRRtoolbelt.less进行了代码解析，主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译等知识。

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

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

whqet

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过开源文档学LESS系列2

通过开源文档学LESS系列的第一部分，我们通过一个经典的LESS Mixins集preboot，学习了LESS的基础知识，包括变量、注释、混合和混合的参数等，详见通过开源文档学LESS系列1。我们继续第二部分，通过tRRtoolbelt.less的代码解读来学习LESS。tRRtoolbelt.less是由Trent Oswald开发的一个便用日常应用的LESS mixinis Collection。
复制链接

扫一扫