详解Less运算符和函数

今天给大家写一篇关于Less运算符和函数的less学习教程 ，有什么问题一起探讨。

 

运算符

  Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点：

  1. 运算数与运算符间必须用空格分隔；

  2. 以第一个运算数的单位作为运算结果的单位；

    Less源码：

 

// 运算数与运算符间没有空格

@fail: 1px +2em;

.fail{

  height: @fail;

}

 

@success1: 1px + 2em;

.success1{

  height: @success1;

}

 

@success2: 2px + 1em;

.success2{

  height: @success2;

}

 

    最终输出：

 

.fail{

  height: 1px 2em;

}

 

.success1{

  height: 3px;

}

 

.success2{

  height: 3em;

}

 

函数

  Less为我们提供了一个功能强大的内置函数库，其中绝大部分为颜色处理函数。下面着重介绍Misc Function中的default函数、String Function中的escape函数和颜色处理函数。

  1. default函数

     示例：

 

// for teenager

.person(@age) when (@age <= 19) and (@age >=13){

  height: @age * 10px;

}// for child

.person(@age) when (@age <13){

  height: @age * 6px;

}// for adult

.person(@age) when (default()){

  height: 180px;

}

 

.son{

  .person(10);

}

.daughter{

  person(17);

}

.father{

 .person(27);

}

    最终输出：

.son{

  height: 60px;

}

.daughter{

  height: 170px;

}

.father{

  height: 180px;

}

    虽然上述示例逻辑上不合理。但可以看出default函数用于条件控制当中，充当else或switch语句中default的角色。

    通过官网提供的综合示例我们可以更好理解它的用法：

// Less源码.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;

}

   注意：

     1. default函数必须在条件控制语句当中使用；

     2. default函数可实现比else更复杂的功能，如下：

// Less源码.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 {

  /* ... */

}

  2. escape函数

    顾名思义就是对字符串中的特定字符进行编码，该函数将对\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ 和 =字符进行编码。

  3. 颜色处理函数

    颜色处理函数又分为四大类：颜色定义函数(Color Definition)、颜色通道值获取函数(Color Channel)、颜色通道值修改函数(Color Operation Function)、混色函数(Color Blending)。

    这里仅仅介绍常用的lighten和darken函数。

     lighten(color, amount) ，color为颜色，amount为增加的亮度值，取值范围为0-100%。

     darken(color, amount) ，color为颜色，amount为减少的亮度值，取值范围为0-100%。

 

 

 

原文来自：博客园/张来秀