惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Visual Studio Blog
量子位
大猫的无限游戏
大猫的无限游戏
Hugging Face - Blog
Hugging Face - Blog
S
SegmentFault 最新的问题
Blog — PlanetScale
Blog — PlanetScale
月光博客
月光博客
Google DeepMind News
Google DeepMind News
小众软件
小众软件
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享
MongoDB | Blog
MongoDB | Blog
B
Blog RSS Feed
博客园 - Franky
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
B
Blog
博客园 - 聂微东
The GitHub Blog
The GitHub Blog
Recent Announcements
Recent Announcements
Y
Y Combinator Blog
Microsoft Security Blog
Microsoft Security Blog
雷峰网
雷峰网
Jina AI
Jina AI
酷 壳 – CoolShell
酷 壳 – CoolShell

博客园 - 新一

HPUX 大文件系统扩容 Win7 安装Apache 2.2.4报错:<OS 5>拒绝访问. :Failed to open the WinNT service manager java后台进程和线程优先级 在Linux下用源码编译安装apache2 Java IO--压缩流 线程池技术 Red Hat dhclient [置顶] 开关电源的pcb设计规范 javascript 的一些理解和随笔 动态规划之 <筷子> 都是权限惹的祸! [LeetCode] Validate Binary Search Tree 解决IE6-IE8 Js代码不执行问题 linux下chmod使用 熬之滴水成石:最想深入了解的内容--windows内核机制(6) linux网络设备—PHY linux网络设备—mdio总线 通过action传过来的值在option获取进行验证 屌丝也用按位与(&),按位或(|) (二)
LESS详解之函数(四)
新一 · 2013-11-14 · via 博客园 - 新一

之前已经为大家介绍了一些LESS函数,大家应该对之前介绍的有所了解了。下面依旧为大家介绍LESS的函数,附加着一些小例子。希望这些有关LESS的函数能在大家编写LESS的时候有所帮助。

saturation从颜色值中提取饱和度(@color)

从颜色对象中提取饱和度值。参数:@color: 颜色对象 (A color object.)。返回值:百分比值 0-100。

LESS代码

div {
	width:saturation(hsl(90, 100%, 50%));
}

编译后的CSS代码

div {
  width: 100%;
}

lightness从颜色值中提取亮度(@color)

从颜色对象中提取亮度值。参数:@color: 颜色对象 (A color object.)。返回值:百分比值 0-100

LESS代码

div {
	width:lightness(hsl(90, 100%, 50%));
}

编译后的CSS代码

div {
  width: 50%;
}

hsvhue从颜色中提取色相(@color)

以HSV色彩空间提取颜色中的色相值。参数:颜色。返回:整数,范围为0-360

LESS代码

div {
	width:hsvhue(hsv(90, 100%, 50%));
}

编译后的CSS代码

div {
  width: 90;
}

hsvsaturation以HSV色彩空间提取颜色中的饱和度值(@color)

从颜色中提取 saturation 值,以HSV色彩空间表示(饱和度)。参数:颜色。返回值:百分比,范围0-100

LESS代码

div {
	width:hsvsaturation(hsv(90, 100%, 50%));
}

编译后的CSS代码

div {
  width: 100%;
}

hsvvalue以HSV色彩空间提取颜色中的色调值(@color)

从颜色中提取 value 值,以HSV色彩空间表示(色调)。参数:颜色。返回:百分比,范围为0-100

LESS代码

div {
	width:hsvvalue(hsv(90, 100%, 50%));
}

编译后的CSS代码

div {
  width: 50%;
}

red从颜色对象中提取红色值(@color)

从颜色值中提取 'red' 值(红色)。参数:@color: 颜色对象 (A color object.)。返回值:整数 0-255

LESS代码

div {
	width:red(rgb(10, 20, 30));
}

编译后的CSS代码

div {
  width: 10;
}

green从颜色对象中提取绿色值(@color)

从颜色值中提取 'green' 值(绿色)。参数:@color: 颜色对象 (A color object.)。返回值:整数 0-255

LESS代码

div {
	width:green(rgb(10, 20, 30));
}

编译后的CSS代码

div {
  width: 20;
}

blue从颜色对象中提取蓝色值(@color)

从颜色值中提取 'blue' 值(蓝色)。参数:@color: 颜色对象 (A color object.)。返回值:整数 0-255

LESS代码

div {
	width:blue(rgb(10, 20, 30));
}

编译后的CSS代码

div {
  width: 30;
}

alpha从颜色对象中提取 alpha 值(@color)

从颜色值中提取 'alpha' 值(透明度)。参数:@color: 颜色对象 (A color object.)。返回值:浮点数,介于 0-1 之间

LESS代码

div {
	width:alpha(rgba(10, 20, 30, 0.5));
}

编译后的CSS代码

div {
  width: 0.5;
}

luma从颜色值中提取亮度的百分比(@color)

计算颜色对象的 luma 值(亮度的百分比表示法)。使用在WCAG2.0中定义的SMPTE C / Rec. 709 coefficients。 这个计算公式也用在 contrast() 函数中。参数:@color: 颜色对象 (A color object.)。返回值:百分比 0-100%

LESS代码

div {
	width:luma(rgb(100, 200, 30));
}

编译后的CSS代码

div {
  width: 65%;
}

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