Christian-health / StudyNote2017

2017年学习笔记
0 stars 0 forks source link

less Function 集合 #23

Open Christian-health opened 6 years ago

Christian-health commented 6 years ago

Misc 大杂烩 Function

color

color

解析颜色,将代表颜色的字符串转换为颜色值。

参数: string: 代表颜色值的字符串。

返回: color

示例: color("#aaa");

输出: #aaa

举例:
a {
   back-ground:color("#bbbaaa")
}
编译之后
a {
  back-ground: #bbbaaa;
}

convert

将数字从一种类型转换到另一种类型。
第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的,则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。

无需转化改变单位参照 unit。

兼容的单位组:

长度: m, cm, mm, in, pt and pc,
时间: s and ms,
角度: rad, deg, grad and turn.
参数:

number: 带单位的浮点数。
identifier, string or escaped value: 单位
返回: number

示例:

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // 不兼容的单位类型
输出:

9000ms
140mm
8

这里只是举例字,代码是有问题的back-ground不能这么设置:
a {  
   back-ground:convert(9s, "ms");
   back-ground:convert(14cm, mm);
   back-ground:convert(8, mm);
}
编译之后
a {
  back-ground: 9000ms;
  back-ground: 140mm;
  back-ground: 8;
}

data-uri

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

mimetype: 可选参数,MIME类型字符串。
url: 需要内嵌的文件的URL。
示例: data-uri('../data/image.jpg');

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

在浏览器中输出: url('../data/image.jpg');

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

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

例如:
a {  
   back-ground:data-uri('./data/image.png');
}
编译之后:
a {
  back-ground: url("data:image/png;base64,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");
}

unit

移除或者改变属性值的单位。
参数:

dimension: 数字,带或不带单位。
unit: 可选参数,将要替换成的单位,如果省略则移除原单位。
转化成指定单位参照 convert。

示例: unit(5, px)

输出: 5px

示例: unit(5em)

输出: 5

例如:
a {  
   back-ground:unit(5, px); //《如果原来的数值没有单位,那么unit函数给它添加一个单位》
   back-ground:unit(5em);   //《如果原来的数值有单位,那么unit函数去掉它的单位》
}
编译之后:
a {
  back-ground: 5px;  
  back-ground: 5;
}

default

只能边界条件中使用,没有匹配到其他自定义函数(mixin)的时候返回true,否则返回false。
示例:

.mixin(1)                   {x: 11}
.mixin(2)                   {y: 22}
.mixin(@x) when (default()) {z: @x}

div {
  .mixin(3);
}

div.special {
  .mixin(1);
}
输出:

div {
  z: 3;
}
div.special {
  x: 11;
}
default的返回值还可以和边界操作一起使用。例如,.mixin() when not(default()) {},将会在至少一个除自身外的自定义函数(mixin)满足条件时被调用:

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

div-1 {
  .mixin(100px);
}

div-2 {
  /* ... */
  .mixin(100%);
}
结果:

div-1 {
  width: 100px;
  padding: 20px;
}
div-2 {
  /* ... */
}
在同一个边界条件或者不同的混合条件中,default()可以被调用多次:

div {
  .m(@x) when (default()), not(default())    {always: @x}
  .m(@x) when (default()) and not(default()) {never:  @x}

  .m(1); // OK
}
然而,使用default()时如果检测到多个混合条件有潜在性冲突,Less会抛出一个异常:

div {
  .m(@x) when (default())    {}
  .m(@x) when not(default()) {}

  .m(1); // Error
}
在以上的例子中,通过与其他条件的相互依赖就可以确认在调用时default()所返回的值。

更多default()的高级用法:

.x {
  .m(red)                                    {case-1: darkred}
  .m(blue)                                   {case-2: darkblue}
  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}
  .m('foo')                                  {case-1: I am 'foo'}
  .m('bar')                                  {case-2: I am 'bar'}
  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

  &-blue  {.m(blue)}
  &-green {.m(green)}
  &-foo   {.m('foo')}
  &-baz   {.m('baz')}
}
结果:

.x-blue {
  case-2: #00008b;
}
.x-green {
  default-color: #008000;
}
.x-foo {
  case-1: I am 'foo';
}
.x-baz {
  default-string: and I am the default;
}
default函数只能作为Less构建函数在边界条件中使用。如果在混合条件之外使用,default函数只会被解释成普通的CSS属性值:

示例:

div {
  foo: default();
  bar: default(42);
}
结果:

div {
  foo: default();
  bar: default(42);
}
Christian-health commented 6 years ago

string Function

escape 转意函数

Applies URL-encoding to special characters found in the input string.

《不转义编码的字符: ,, /, ?, @, &, +, ', ~, ! and $.》
《最常见的转义编码字符: \<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =.》
参数: string: 需要转义的字符串

返回: 不带引号的转义字符串。

例如:

escape('a=1')
输出:

a%3D1
注意: 如果一个参数不是一个字符串, 输出是未定义.当前的实现是颜色返回undefined,
其他种类参数原样输出,这种转义不可靠,将来也许会改变。

例如:
a {  
   back-ground:escape('a=1');  
}
编码之后:
a {
  back-ground: a%3D1;
}

e预判函数 =======》这个函数没有看懂

Css 转义, 用~"值" 符号代替。
他认为字符串是一个参数返回不带引号的原内容。这可以用来输出一些Less并不认可的Css值,
包括未验证的Css语法或者一个专有的语法。

参数: string - 用来转义的字符串.

返回: string - 不带引号的转义字符串。

例如:

filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
输出:

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
注意: 该函数也接受 ~"" 转义值和数字做参数,其他

例如:
a {  
   filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
}
编译之后:
a {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

%百分号格式化函数

函数 %(string, arguments ...) 格式化一个字符串.
第一个参数是带占位符的字符串. 所有占位符始于百分号%后跟字母s,S,d,D,a, or A. 剩下的参数是替换占位符的表达式. 如果你需要输出百分号, 用双百分号转义%%.

如果你需要把特殊字符转义成 utf-8转义码请使用大写字母占位符,该占位符会转义所有的特殊字符除了()'~!。空格会被转义成%20。小写字母占位符会保留特殊字符的原样。

占位符:

d, D, a, A - 能被任何类型参数替换 (颜色值, 数字, 转义值, 表达式, ...). 如果你在字符串中结合使用, 整个字符串参数都会替换进去 - 包括它的引号. 然后, 然后引号会被替换到字符串参数的原有位置, 也许会被转义或者还是不变的,取决于占位符是大写字母还是小写字母。
s, S - 能被除了颜色值以为任何类型参数替换. 如果你在字符串中结合使用, 只会替换成字符串参数的值,-而字符串参数引号都被忽略
参数:

string: 带占位符的格式化字符串,
anything* : 替换占位符的值.
返回: 格式化后的字符串 string.

例如:  《注意使用%d,%D,%s,%S,然后进行转换之后的不同,仔细看下面的转换后的串》
a {
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
}
输出:
a {
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
}

replace替换

用另一个字符串替换文本.
发布于 v1.7.0

参数:

string: 搜索和替换用的字符串.
pattern:一个字符串或者能搜索的正则表达式.
replacement: 匹配模式成功的替换字符串.
flags: (可选的) 正则表达式匹配标识(全匹配还是...).
返回: 替换过值后的字符串.

例如:

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
结果:

"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

例如:
a {
    back-ground:replace("Hello, Mars?", "Mars\?", "Earth!");
   back-ground:replace("One + one = 4", "one", "2", "gi");
   back-ground:replace('This is a string.', "(string)\.$", "new $1.");
    back-ground:replace(~"bar-1", '1', '2');
}

编译之后:
a {
  back-ground: "Hello, Earth!";
  back-ground: "2 + 2 = 4";
  back-ground: 'This is a new string.';
  back-ground: bar-2;
}
Christian-health commented 6 years ago

List Function

length 长度


返回集合中的值的数目.
参数: list - 逗号或者空格隔开的值集合。 返回: 集合的值个数。

例如: length(1px solid #0080ff); 输出: 3

例如:

@list: "banana", "tomato", "potato", "peach";
n: length(@list);

extract 提取 注意索引值是从1开始的,而不是0

返回集合中指定索引的值。
参数: list - 逗号或者空格隔开的值集合。 index - 用于返回集合中指定位置值的整型数字。 返回: 集合指定位置处的值。

例如: extract(8px dotted red, 2); 输出: dotted

例如:

@list: apple, pear, coconut, orange;
value: extract(@list, 3);
输出:

value: coconut;
Christian-health commented 6 years ago

Math function

ceil 向上取整

向上取整。
参数: number - 浮点数。

返回: integer

示例: ceil(2.4)

输出: 3

floor 向下取整

向下取整。
参数: number - 浮点数。

返回: integer

示例: floor(2.6)

输出: 2

percentage 百分比

将浮点数转换为百分比字符串。
参数: number - 浮点数。

返回: string

示例: percentage(0.5)

输出: 50%

round 四舍五入

Applies rounding.
参数:

number: 浮点数。
decimalPlaces: 可选参数,四舍五入取整的小数点位置,默认值为0。
返回: number

示例: round(1.67)

输出: 2

示例: round(1.67, 1)

输出: 1.7

sqrt 平方根

计算一个数的平方根,原样保持单位。
参数: number - 浮点数。

返回: number

示例:

sqrt(25cm)
输出:

5cm
示例:

sqrt(18.6%)
输出:

4.312771730569565%;

abs绝对值

计算数字的绝对值,原样保持单位。
参数: number - 浮点数。

返回: number

示例 #1: abs(25cm)

输出: 25cm

示例 #2: abs(-18.6%)

输出: 18.6%;

sin

正弦函数。
处理时会将没有单位的数字认为是弧度值。

参数: number - 浮点数。

返回: number

示例:

sin(1); // 1弧度角的正弦值
sin(1deg); // 1角度角的正弦值
sin(1grad); // 1百分度角的正弦值
输出:

0.8414709848078965; // 1弧度角的正弦值
0.01745240643728351; // 1角度角的正弦值
0.015707317311820675; // 1百分度角的正弦值

asin


反正弦函数。
返回以弧度为单位的角度,区间在 -π/2 到 π/2 之间。

参数: number - 区间在 [-1, 1] 之间的浮点数。

返回: number

示例:

asin(-0.8414709848078965)
asin(0)
asin(2)
输出:

-1rad
0rad
NaNrad

cos

余弦函数。
处理时会将没有单位的数字认为是弧度值。

参数: number - 浮点数。

返回: number

示例:

cos(1) // 1弧度角的余弦值
cos(1deg) // 1角度角的余弦值
cos(1grad) // 1百分度角的余弦值
输出:

0.5403023058681398 // 1弧度角的余弦值
0.9998476951563913 // 1角度角的余弦值
0.9998766324816606 // 1百分度角的余弦值

acos

反余弦函数。
返回以弧度为单位的角度,区间在 0 到 π 之间。

参数: number - 区间在 [-1, 1] 之间的浮点数。

返回: number

示例:

acos(0.5403023058681398)
acos(1)
acos(2)
输出:

1rad
0rad
NaNrad

tan

正切函数。
处理时会将没有单位的数字认为是弧度值。

参数: number - 浮点数。

返回: number

示例:

tan(1) // 1弧度角的正切值
tan(1deg) // 1角度角的正切值
tan(1grad) // 1百分度角的正切值
输出:

1.5574077246549023   // 1弧度角的正切值
0.017455064928217585 // 1角度角的正切值
0.015709255323664916 // 1百分度角的正切值

atan

反正切函数。
返回以弧度为单位的角度,区间在 -π/2 到 π/2 之间。

参数: number - 浮点数。

返回: number

示例:

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // 22四舍五入保留6位小数后的反正切值
输出:

-1rad
0rad
1.525373rad;

pi

返回 π (pi);
参数: none

返回: number

示例:

pi()
输出:

3.141592653589793

pow

乘方运算。
假设第一个参数为A,第二个参数为B,返回A的B次方。返回值与A有相同单位,B的单位被忽略。

参数:

number: 基数 - 浮点数。
number: 冪指数 - 浮点数。
返回: number

示例:

pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)
输出:

1cm
0.0016
5
NaN
NaN%

mod

取余运算。
假设第一个参数为A,第二个参数为B,返回A对B取余的结果。返回值与A有相同单位,B的单位被忽略。这个函数也可以处理负数和浮点数。

参数:

number: 浮点数。
number: 浮点数。
返回: number

示例:

mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);
输出:

NaNcm;
5cm
-1%;

min

最小值运算。
返回所有传入参数中的最小值。

参数: value1, ..., valueN - 一个或多个待比较的值。

返回: 最小值。

示例: min(5, 10);

输出: 5

示例: min(3px, 42px, 1px, 16px);

输出: 1px

max

最大值运算。
返回所有传入参数中的最大值。

参数: value1, ..., valueN - 一个或多个待比较的值。

返回: the highest value.

示例: max(5, 10);

输出: 10

示例: max(3%, 42%, 1%, 16%);

输出: 42%
Christian-health commented 6 years ago

Type function

函数(isnumber)

如果一个值是一个数字,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是数字返回真true,否则假false.

例如:

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

函数(isstring)

如果一个值是一个字符串,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是字符串返回真true,否则假false.

例如:

isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
isstring(7.8%);     // false
isstring(keyword);  // false
isstring(url(...)); // false

函数(iscolor)

如果一个值是一个颜色,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是颜色返回真true,否则假false.

例如:

iscolor(#ff0);     // true
iscolor(blue);     // true
iscolor("string"); // false
iscolor(1234);     // false
iscolor(56px);     // false
iscolor(7.8%);     // false
iscolor(keyword);  // false
iscolor(url(...)); // false

函数(iskeyword)

如果一个值是一个关键字,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是关键字返回真true,否则假false.

例如:

iskeyword(#ff0);     // false
iskeyword(blue);     // false
iskeyword("string"); // false
iskeyword(1234);     // false
iskeyword(56px);     // false
iskeyword(7.8%);     // false
iskeyword(keyword);  // true
iskeyword(url(...)); // false

例如:
a {
back-ground:iskeyword(back-ground);  // true
}
编译之后:
a {
  back-ground: true;
}

函数(isurl)

如果一个值是一个url地址,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是url返回真'true',否则假'false'.

例如:

isurl(#ff0);     // false
isurl(blue);     // false
isurl("string"); // false
isurl(1234);     // false
isurl(56px);     // false
isurl(7.8%);     // false
isurl(keyword);  // false
isurl(url(...)); // true

函数(ispixel)

如果一个值是带像素长度单位的数字,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是带px单位的数字返回真true,否则假false.

例如:

ispixel(#ff0);     // false
ispixel(blue);     // false
ispixel("string"); // false
ispixel(1234);     // false
ispixel(56px);     // true
ispixel(7.8%);     // false
ispixel(keyword);  // false
ispixel(url(...)); // false

函数(isem)

如果一个值是带em长度单位的数字,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是带em单位的数字返回真true,否则假false.

例如:

isem(#ff0);     // false
isem(blue);     // false
isem("string"); // false
isem(1234);     // false
isem(56px);     // false
isem(7.8em);    // true
isem(keyword);  // false
isem(url(...)); // false

函数(ispercentage)

如果一个值是带百分比单位的数字,返回'真(true)',否则返回'假(false)'.
参数: value - 待判断的值或变量.

返回: 若是带百分比单位的数字返回真true,否则假false.

例如:

ispercentage(#ff0);     // false
ispercentage(blue);     // false
ispercentage("string"); // false
ispercentage(1234);     // false
ispercentage(56px);     // false
ispercentage(7.8%);     // true
ispercentage(keyword);  // false
ispercentage(url(...)); // false

函数(isunit) 用来判断一个值是否有单位,如果有返回true

如果一个值是带指定单位的数字,返回'真(true)',否则返回'假(false)'.
参数:

value - 待判断的值或变量.
unit - 用于测试比较的一个单位标示符.
返回: 若是带指定单位的数字返回真true,否则假false. 例如:

isunit(11px, px);  // true
isunit(2.2%, px);  // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em);  // false
isunit(#ff0, pt);  // false
isunit("mm", mm);  // false
Christian-health commented 6 years ago

color definition function

rgb(@red,@green,@blue) 《不透明的颜色对象》


通过《十进制》红色,绿色,蓝色三种值 (RGB) 创建《不透明的颜色对象》。
在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色,例如 red -> #ff0000

参数:

@red: 整数 0-255 或百分比 0-100%
@green: 整数 0-255 或百分比 0-100%
@blue: 整数 0-255 或百分比 0-100%
返回值: 颜色(color)

例如: rgb(90, 129, 32)

输出: #5a8120

rgba(@red,@green,@blue,@alpha) 《带alpha透明的颜色对象》

通过十进制红色,绿色,蓝色,以及 alpha 四种值 (RGBA) 创建《带alpha透明的颜色对象》。
参数:

@red: 整数 0-255 或百分比 0-100%.
@green: 整数 0-255 或百分比 0-100%.
@blue: 整数 0-255 或百分比 0-100%.
@alpha: 数字 0-1 或百分比 0-100%.
返回值: 颜色(color)

例如: rgba(90, 129, 32, 0.5)

输出: rgba(90, 129, 32, 0.5)

argb(@color) 创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色

创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA !)。
这种格式被用在IE滤镜中,以及.NET和Android开发中。

参数: @color: 颜色对象(color object)

返回值: 字符串(string)

例如: argb(rgba(90, 23, 148, 0.5));

输出: #805a1794

hsl(@hue,@saturation,@lightness)

通过色相 (hue),饱和度 (saturation),亮度 (lightness) 三种值 (HSL) 创建《不透明的颜色对象》。
参数:

@hue: 整数 0-360 表示度数
@saturation: 整数 0-100% 或是数字 0-1
@lightness: 整数 0-100% 或是数字 0-1
返回值:颜色(color)

例如:hsl(90, 100%, 50%)

输出:#80ff00

当你想使用一种颜色来创建另一种颜色时很方便,如:@new: hsl(hue(@old), 45%, 90%);

@new 将使用 @old 的 色相值(hue),以及它自己的饱和度与亮度。

hsla(@hue,@saturation,@lightness,@alpha)

通过色相 (hue),饱和度 (saturation),亮度 (lightness),以及 alpha 四种值 (HSLA) 创建《透明的颜色对象》。
参数:

@hue: 整数 0-360 表示度数
@saturation: 百分比 0-100% 或数字 0-1.
@lightness: 百分比 0-100% 或数字 0-1.
@alpha: 百分比 0-100% 或数字 0-1.
返回值: 颜色(color)

例如: hsl(90, 100%, 50%, 0.5)

输出: rgba(128, 255, 0, 0.5)

hsv(@hue,@saturation,@value)

通过色相 (hue),饱和度 (saturation),色调 (value) 三种值 (HSV) 创建《不透明的颜色对象》。
注意: HSV 与 HSL 不同,HSV是另一种在Photoshop中可用的色彩空间

参数:

@hue: 整数 0-360 代表度数
@saturation: 百分比 0-100% 或数字 0-1
@value: 百分比 0-100% 或数字 0-1
返回值: 颜色(color)

例如: hsv(90, 100%, 50%)

输出: #408000

hsva(@hue,@saturation,@value,@alpha)

通过色相 (hue),饱和度 (saturation),色调 (value),以及 alpha 四种值 (HSVA) 创建《透明的颜色对象》。
注意:HSVA 与 HSLA 不同,HSVA另一种在Photoshop中可用的色彩空间。

参数:

@hue: 整数 0-360 代表度数
@saturation: 百分比 0-100% 或数字 0-1
@value: 百分比 0-100% 或数字 0-1
@alpha: 百分比 0-100% 或数字 0-1
返回值: 颜色(color)

例如: hsva(90, 100%, 50%, 0.5)

输出: rgba(64, 128, 0, 0.5)