LESS详解之函数(一)

Love The Way You Lie 2022-09-17 13:17 473阅读 0赞

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详解之函数能为大家有所帮助。