【Less】函数

2021/09/09 09:31:01

Less

杂项

data-uri() 把指定路径的文件编码作为内联资源使用(减少 http 请求), 无法编码时回退为 url()
get-unit() 传入带单位的数字, 返回其单位, 没有单位时返回空

获取图片尺寸

image-size() 获取图片宽高参数: 文件路径 image-size('/img/bg.png') 返回值: 空格分隔的宽高 10px 50px
image-width() 获取图片宽度, 参数&返回值同上
image-height() 获取图片高度, 参数&返回值同上

单位转换

convert() 一参为转换前的带单位数字, 二参为要转换的单位, 无法转换返回一参

可转换单位:

长度: m, cm, mm, in, pt, pc, px
时间: s, ms
角度: rad, deg, grad, turn

字符串函数

e() 转义, 类似 css 中的 ~'value' 语法, 将字符串原样输出
%() 模板字符串, 类似 c++ 的占位输出模式, 即按顺序用字符串替换占位符
占位符类型: %s, %d, %a, 使用小写字母时不会对特殊字符转义, 使用大写字符如 %S 时, 特殊字符(不包括 ()'~! )会被转义为 utf-8 编码
特殊转义: 百分比-%% , 空格-%20
%a 和 %d 在替换后会保留引号
%s 替换后省略引号
```
// less语句
format-a-d: %(
  "repetitions: file: %d",
  "directory/file.less"
); // 连同引号一起被替换
format-s: %("repetitions: file: %s", "directory/file.less"); // 省略引号

// 输出
format-a-d: "repetitions: file: " directory/file.less "";
format-s: "repetitions: file: directory/file.less";
```
replace() 替换字符串中的文本, 特殊字符需要用 \ 转义
replace(string, pattern, replacement, flags)
string：要搜索和替换的字符串。 pattern：要搜索的字符串或正则表达式模式。 replacement：用于替换匹配模式的字符串。 flags：（可选）正则表达式标志

参数列表

length() 获取参数列表(逗号或空格分隔)中的元素长度

// less语句
n: length(a, b, c, d); // 参数列表, 不是字符串

// 输出
n: 4;

extract() 提取参数列表中指定位置的值

// less语句
@list: name, v, kk;
value: extract(@list, 1);

// 输出
value: v;

Math

ceil() 向上取整
floor() 向下取整
percentage() 转换为百分比
round() 四舍五入, 接收两个参数, 一参为目标值, 二参为要保留的小数位数, 默认为 0
sqrt() 求平方根, 单位不变
abs() 绝对值, 单位不变
三角函数众...
pi() 不接受参数, 返回 π 值
pow(a,b) 返回 a 的 b 次方, 单位以第一个为准, 一参无单位则返回值无单位
mod(a,b) 模运算, 单位以第一个为准
min() 最小值, 单位会换算为相同的进行比较
max() 最大值, 同上

类型检查

isnumber()
isstring()
iscolor()
iskeyword() 是否为关键字
isurl() 是否为 url
isruleset() 是否为规则集

单位检查

ispixel() px
isem() em
ispercentage() %
isunit(11px, px) 判断值是否时指定单位的数字, 一参为值, 二参为指定单位

颜色

颜色定义

rgb(0,0,10%) 转换为 #00001a 十六进制的颜色, 参数为数值(0-255)或百分比
rgba(0,0,10%,.5) 转换为 rgba(0, 0, 26, 0.5) 参数同上
hsl(90, 100%, 50%) 转换为 #80ff00 十六进制, 根据色相, 饱和度, 亮度创建不透明的颜色对象, 色相范围为 0-360 之间的整数, 饱和度,亮度为数值(0-1)或百分比
hsla() 同上, 加了透明度

获取颜色通道

hsl 颜色空间

hue(hsl(90, 100%, 50%)) 90, 提取 hsl 颜色空间中的色相
saturation(hsl(90, 100%, 50%)) 100%, 提取饱和度
lightness(hsl(90, 100%, 50%)) 50%, 提取亮度

rgb, rgba 颜色空间

red(rgb(10, 20, 30)) 返回红色值
green(rgb(10, 20, 30)) 返回绿色值
blue(rgb(10, 20, 30)) 返回蓝色值
alpha(rgba(10, 20, 30, 0.5)) 0.5, 返回透明度

颜色操作

mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%) 将两种颜色按比例混合在一起, 包括不透明度
tint(rgba(00,0,255,0.5), 50%) 将颜色与白色按比例混合, 相当于 mix(#fff, @color, @weight), 默认50%
shade(rgba(00,0,255,0.5), 50%) 将颜色与黑色按比例混合, 相当于 mix(#000, @color, @weight), 默认50%

【Less】函数

# 杂项

# 获取图片尺寸

# 单位转换

# 字符串函数

# 参数列表

# Math

# 类型检查

# 颜色

# 颜色定义

# 获取颜色通道

# 颜色操作

杂项

获取图片尺寸

单位转换

字符串函数

参数列表

Math

类型检查

颜色

颜色定义

获取颜色通道

颜色操作