运算、转义、函数

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-05-19

运算

在 less 的运算中， 加减乘除可以对任何数字、颜色或变量进行运算。

// 会尽可能的进行单位换算
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm + 5mm; // -1.5cm

// 多个单位时，会以左侧操作数的单位类型为主
@conversion-3: 2 + 5px - 3cm;  // 4px

@conversion-4: 2 * 5px / 2cm;  // 5px;

// 对变量进行运算
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%

// 对颜色进行运算
@color: #224488 / 2; // #112244
.class {
  background-color: #112244 + #111; // #223355
}

转义

转义~（Escaping）允许你使用任意字符串作为属性或变量值，保持原样输出。

// 作为值
@p1: ~"10px + 10";
@p2: 10px + 10;

.classA {
  padding: @p1;
}

.classB {
  padding: @p2;
}

// 编译为
..classA {
  padding: 10px + 10; // 原样输出
}
.classB {
  padding: 20px;
}

// 作为属性名
@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

// 编译为
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

函数

列举常用函数，更多请查看

if

表达式为： if(expression, true, false)

@p: if((2 > 3), 100px, 200px);

.class {
  margin: if((2 > 1), 10px, 20px);
  padding: @p;
}

// 编译为
.class {
  margin: 10px;
  padding: 200px;
}

在if中使用的逻辑运算，表达式如下：

• if(not (true), foo, bar);
• if((true) and (2 > 1), foo, bar);
• if((false) or (isstring("boo!")), foo, bar);

示例：

@c1: if(not (2 > 1), red, green);
@c2: if((true) and (2 < 1), red, green);
@c3: if((false) or (isstring("boo!")), red, green);

.class {
  color: @c1;
  border-color: @c2;
  background-color: @c3;
}

// 编译为
.class {
  color: green;
  border-color: green;
  background-color: red;
}

结合 boolean 函数

@c1: boolean(red > 50);

.class {
  width: if(@c1, 100px, 200px)
}

// 编译为
.class {
  width: 200px;
}

Type Functions

1、isnumber

isnumber(#ff0);     // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true

2、isstring

isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(56px);     // false

3、iscolor

iscolor(#ff0);     // true
iscolor(blue);     // true

4、isurl

isurl("string"); // false
isurl(url(...)); // true

5、ispixel

ispixel(1234);     // false
ispixel(56px);     // true
ispixel(7.8%);     // false

6、isem

isem(56px);     // false
isem(7.8em);    // true

7、ispercentage

ispercentage(56px);     // false
ispercentage(7.8%);     // true

8、isunit(value, unit)

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

Misc Function

color("#aaa"); // #aaa

image-size("file.png"); // 10px 10px
image-width("file.png"); // 10px
image-height("file.png"); // 10px

data-uri(mimetype, url) 进行base64编码。

data-uri('../data/image.jpg');
// url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg=='); 

data-uri('image/jpeg;base64', '../data/image.jpg');
// url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

data-uri('image/svg+xml;charset=UTF-8', 'image.svg'); // 
// url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");

需要注意的是，如果没有本地图片，data-uri(imgPath) 会原样输出 url(imgPath)，不是对应类型的转换也会原样输出。