Less简明教程
2.4.2 函数
阅读(

Less 基础

Less 特性

变量

Mixin

嵌套规则

运算和函数

运算

函数

Less 中,提供了丰富的颜色和数学函数。比如,针对 color 专门提供了一系列的颜色运算函数,这些函数会先将颜色转化成 HSL 色彩空间,然后在通道级别进行操作。Less提供了以下颜色运算函数:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *Less* saturated than @color
fadein(@color, 10%);      // return a color 10% *Less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency
spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);    // return a mix of @color1 and @color2

这些函数使用起来相当简单,就跟使用 JavaScript 中的函数一样。Less 文件如下:

@init: #f04615;
#body {
   background-color: fadein(@init, 10%);
 }

编译后的CSS代码为:

#body {
   background-color: #f04615;
}

这些都是Less的简单用法,当你完全掌握Less语法后,你会发现可以用Less做更多JavaScript的工作。当然,这里只是抛砖引玉,在第3章,将对Less函数进行详细介绍。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验