LESS详解之函数(七)

　　之前已经为大家介绍了6次关于LESS自带函数这块的小知识了，今天依然为大家介绍LESS自带函数的相关知识。主要介绍一些关于判断的函数，这期间还有些小例子以便大家更好的理解与运用。

　　iscolor判断颜色(@colorOrAnything)

　　这个函数是用来判断一个值是否是一个颜色。

　　LESS代码

@c : #666;

.meng (@c) when (iscolor(@c)){
	color: @c;
}

div {
	height:20px;
	.meng(@c)
}

　　编译后的CSS代码

div {
  height: 20px;
  color: #666666;
}

　　isnumber判断数字(@numberOrAnything)

　　这个函数是用来判断一个值是否是数字。这个值可以带单位也可以不带单位。

　　LESS代码

@n : 300px;
@h : 20;

.meng (@n) when (isnumber(@n)){
    width:@n;
}
.leng (@h) when (isnumber(@h)){
    height:@h;
}

div {
    .meng(@h);
    .meng(@n);
}

　　编译后的CSS代码

div {
  width: 20;
  width: 300px;
}

　　isstring判断字符串(@stringOrAnything)

　　LESS中也有字符串的类型，可以用这个函数来判断是否是字符串。

　　LESS代码

@n : "梦龙小站";

.meng (@n) when (isstring(@n)){
	content:@n;
}
div {
	.meng(@n);
}

　　编译后的CSS代码

div {
  content: "梦龙小站";
}

　　iskeyword判断关键字(@keywordOrAnything)

　　判断一个值是否是关键字。这个暂时还没研究出来关键字是什么，所以没弄出个例子。有小伙伴儿知道的可以在下面评论哟。

　　isurl判断地址(@urlOrAnything)

　　判断一个值是否是url.这个暂时还没研究出来“url”怎么书写才能判断出来，所以没弄出个例子。有小伙伴儿知道的可以在下面评论哟。

　　ispixel判断px为单位的数值(@pixelOrAnything)

　　判断一个值是否是以px为单位的数值

　　LESS代码

@n : 30px;
@h : 50em;

.meng (@n) when (ispixel(@n)){
	width:@n;
}
.long (@h) when (ispixel(@h)){
	height:@h;
}
div {
	.meng(@n);
	.long(@h);
}

　　编译后的CSS代码

div {
  width: 30px;
}

　　ispercentage判断百分数(@percentageOrAnything)

　　判断一个值是否是百分数

　　LESS代码

@n : 50%;
@h : 100em;

.meng (@n) when (ispercentage(@n)){
	width:@n;
}
.long (@h) when (ispercentage(@h)){
	height:@h;
}
div {
	.meng(@n);
	.long(@h);
}

　　编译后的CSS代码

div {
  width: 50%;
}

　　isem判断以em为单位的数值(@emOrAnything)

　　判断一个值是否是以em为单位的数值

　　LESS代码

@n : 50%;
@h : 100em;

.meng (@n) when (isem(@n)){
	width:@n;
}
.long (@h) when (isem(@h)){
	height:@h;
}
div {
	.meng(@n);
	.long(@h);
}

　　编译后的CSS代码

div {
  height: 100em;
}

　　isunit判断指定单位的数值(@numberOrAnything, "rem")

　　判断一个值是否是指定单位的数值

　　LESS代码

@n : 50%;
@h : 100em;

.meng (@n) when (isunit(@n, "em")){
	width:@n;
}
.long (@h) when (isunit(@h, "em")){
	height:@h;
}
div {
	.meng(@n);
	.long(@h);
}

　　编译后的CSS代码

div {
  height: 100em;
}

　　LESS详解之函数(七)就为大家介绍到这里了。这一波儿接着一波儿的LESS函数的介绍，能为大家有所帮助。感谢大家长期以来对梦龙小站的支持。