LESS详解之函数(一)

　　LESS详解之函数是为大家介绍LESS中自带的一些函数。用小例子来帮助大家更好的理解使用LESS中的函数。

　　escape(@string)编码

 

　　使用URL-encoding的方式编码字符串。如果参数不是字符串的话，函数行为是不可预知的。目前传入颜色值的话会返回undefined，其它的值会原样返回。

　　不会被编码：, / / / ? / @ / & / + / ' / ~ / ! / $。

　　最常见的被编码的字符串： / # / ^ / ( / ) / { / } / | / : / > / < / ; / ] / [ / =。

　　参数：字符串。需要转义的字符串

　　返回值：字符串 (string)

　　LESS代码

div {
	width:escape('a=1');
}

　　编译后的CSS代码

div {
  width: a%3D1;
}

　　e(@string)转义如“~”

　　用于对CSS的转义，与~"value"类似。它接受一个字符串作为参数，并原样返回内容(不含引号)。它可用于输出一些不合法的CSS语法，或者是使用LESS不能识别的属性。也接受经~""转义的值或者是数字作为参数。

　　参数：字符串——需要转义的字符串;返回值：字符串的内容，不含引号。

　　LESS代码

div {
	filter:e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
}

　　编译后的CSS代码

div {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

　　%("format", arguments ...)格式化

　　%("format", arguments ...)将会格式化字符串。第一个参数是一个包含占位符的字符串。占位符以百分号%开头，后面接字母s / S / d / D / a / A。后续的参数用于替换这些占位符。如果你需要输出百分号，可以多用一个百分号来转义%%。

　　使用大写的占位符可以将特殊字符按照UTF-8进行转义，函数将会对所有的特殊字符进行转义，除了( / ) / ' / ~ /!。空格会被转义为%20。小写的占位符将原样保持特殊字符，不进行转义。

　　占位符说明：d / D / a / A 可以被任意类型的参数替换(颜色、数字、转义的字符串、表达式等)。如果将它们和字符串一起使用，则整个字符串都会被使用，包含引号。但是，引号将会原样放在字符串中，不会被转义。s / S 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用，则只有字符串的值会被使用，引号会被忽略。

　　参数：字符串，带有占位符的格式化字符串;任意值，用于替换占位符的值;返回值，格式化后的字符串。

　　LESS代码

div {
    /*使用a/d格式化*/
    width:%("repetitions: %a file: %d", 1 + 2, "directory/file.less");
    /*使用大写的a/d格式化*/
    width:%('repetitions: %A file: %D', 1 + 2, "directory/file.less");
    /*使用s格式化*/
    width:%("repetitions: %s file: %s", 1 + 2, "directory/file.less");
    /*使用大写s格式化*/
    width:%('repetitions: %S file: %S', 1 + 2, "directory/file.less");
}

　　编译后的CSS代码

div {
    /*使用a/d格式化*/
    width: "repetitions: 1 + 2 file: "directory/file.less"";

    /*使用大写的a/d格式化*/
    width: "repetitions: 1%20%2B%202 file: %22directory%2Ffile.less%22";

    /*使用s格式化*/
    width: "repetitions: undefined file: directory/file.less";

    /*使用大写s格式化*/
    width: "repetitions: undefined file: directory%2Ffile.less";
}

　　Unit移除替换改变属性单位

　　移除或替换属性值 (dimension) 的单位。还可以返回带不同单位的数值。只有单位被改变，数值本身不会被转换。函数会假设第二个参数带上了合法单位。

　　参数：@dimension: 数字，带或不带单位或者带单位的浮点数；@unit: 可选，将要替换成的单位，如果省略则移除原单位

　　LESS代码

/*移除或替换属性值 (dimension) 的单位*/
div {
    width:unit(5, px);
    height:unit(5em);
    padding:unit(5em, px);
    margin:unit(5px, em);

    
}
/*改变单位*/
span {
    width:unit(9s, ~"em");
    height:unit(-9, px);
}

　　编译后的CSS代码

/*移除或替换属性值 (dimension) 的单位*/
div {
  width: 5px;
  height: 5;
  padding: 5px;
  margin: 5em;
}
/*改变单位*/
span {
  width: 9em;
  height: -9px;
}

　　color(@string)颜色转换

　　解析颜色，将代表颜色的字符串转换为颜色值，参数必须是16进制表示的颜色或者缩写写法。

　　参数：@字符串，代表颜色值的字符串

　　LESS代码

div {
    color:color("#445566");
}
span {
    color:color(~"#123");
}

　　编译后的CSS代码

div {
  color: #445566;
}
span {
  color: #112233;
}

　　data-uri([mimetype,] url)内嵌

　　将一个资源使用BASE64编码嵌入到样式文件，如果开启了ieCompat选项，而且资源文件的体积过大或者是在浏览器中使用，则会使用url()进行回退。如果没有指定MIME，则Node.js会使用MIME包来决定正确的MIME。

　　参数：mimetype，MIME字符串，可选参数;url，需要内嵌的文件的url

　　例如LESS代码

data-uri('../data/image.jpg');

　　编译后的CSS代码

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

　　在浏览器中编译后的CSS代码

url('../data/image.jpg');

　　例如LESS代码

data-uri('image/jpeg;base64', '../data/image.jpg');

　　编译后的CSS代码

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

　　ceil(@number)向上取整

　　向上取整。参数：数字，浮点数;返回值，向上取整后的整数。

　　LESS代码

div {
	width:ceil(2.4)px;
}
span {
	height:ceil(2.8)px;
}

　　编译后的CSS代码

div {
	width:ceil(2.4)px;
}
span {
	height:ceil(2.8)px;
}

　　floor(@number)向下取整

　　向下取整。参数：数字，浮点数;返回值，向下取整后的整数。

　　LESS代码

div {
	width:floor(2.4)px;
}
span {
	height:floor(2.8)px;
}

　　编译后的CSS代码

div {
  width: 2 px;
}
span {
  height: 2 px;
}

　　percentage(@number)转换百分比

　　将浮点数转换为百分比字符串。参数：数字，浮点数;返回值：字符串。

　　LESS代码

div {
	width:percentage(0.5);
}
span {
	height:percentage(5);
}
h1 {
	height:percentage(0.05);
}

　　编译后的CSS代码

div {
  width: 50%;
}
span {
  height: 500%;
}
h1 {
  height: 5%;
}

　　round(number, [places: 0])四舍五入取整

　　四舍五入取整。参数：数字，浮点数；小数位数，数字，可选，四舍五入取整的小数点位置，默认值为0；返回值，数字 (number)。

　　LESS代码

div {
    width:round(1.67);
}
span {
    height:round(1.623487927);
}
h1 {
    height:round(1.9);
}
h3 {
    height:round(1.2);
}
i {
    height:round(1.623487921);
}
em {
    /*四舍五入输出4位小数*/
    height:round(1.623487921, 4);
}

　　编译后的CSS代码

div {
  width: 2;
}
span {
  height: 2;
}
h1 {
  height: 2;
}
h3 {
  height: 1;
}
i {
  height: 2;
}
em {

  /*四舍五入输出4位小数*/
  height: 1.6235;
}

　　LESS详解之函数(一)就为大家介绍到这里了，这只是LESS函数中的一小部分。后面的几天将为大家一波儿接着一波儿的介绍LESS详解之函数。希望这一波儿一波儿的介绍LESS详解之函数能为大家有所帮助。