前端学习系列 -- Less学习（二）

本系列为各个前端相关知识重新深度学习，有需要的小伙伴可关注该专栏，后续会持续更新不同类型的前端相关知识总结

前言

在上一篇文章中，对less的基本使用做了详细的概述，本篇将继续探讨less的高级使用，如果需要了解基本使用请移步另一篇文章 前端学习系列 -- Less学习（一）juejin.cn/post/734606...

函数

Less 提供了许多函数，可以转换颜色、操作字符串和进行数学运算

逻辑函数

（1）if，和js的if一样的条件语句，根据条件返回两个值之一。具体使用如下所示

less 复制代码

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}

//编译结果
div {
    margin: 0;
    color:  black;
}


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

（2）boolean，使用如下：

less 复制代码

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}

//结果
div {
  background: black;
  color: white;
}

字符串函数

（1）escape 将字符串转为URL编码，例：

javascript 复制代码

escape('a=1')

//输出
a%3D1

（2）e 字符串转译：字符串作为参数并按原样返回其内容，但不带引号。它可用于输出无效 CSS 语法或使用 Less 无法识别的专有语法的 CSS 值。例：

less 复制代码

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
filter: e(@mscode);

//输出
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

（2）% 格式函数 %(string, arguments ...) 格式化一个字符串。第一个参数是带占位符的字符串。所有占位符都以百分比符号 % 开头，后跟字母 s、S、d、D、a 或 A。其余参数包含用于替换占位符的表达式。如果你需要打印百分比符号，请使用另一个百分比 %% 将其转义。例：

perl 复制代码

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

//输出
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

（3）replace，字符串替换

php 复制代码

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');

//结果
"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

列表函数

（1）length，返回值列表中的元素数，示例：

less 复制代码

@list: "banana", "tomato", "potato", "peach";
n: length(@list);
//输出
n: 4;

（2）extract，返回列表中指定位置的值，示例：

less 复制代码

@list: apple, pear, coconut, orange;
value: extract(@list, 3);

//输出
value: coconut;

（3）range 生成跨越一系列值的列表,（初始值、最终值、增加量）

css 复制代码

value: range(4);
value: 1 2 3 4;

value: range(10px, 30px, 10);
value: 10px 20px 30px;

（4）each将规则集的评估绑定到列表的每个成员

less 复制代码

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

//输出
.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

数学函数

由于大部分数学函数我们在使用js时已经接触很多，我在这就不逐一举例了，小伙伴们可以自己动手试试。 cell:四舍五入到下一个最高整数
floor:向下舍入到下一个最小整数
percentage:将浮点数转换为百分比字符串。
round:舍入
sqrt:计算数字的平方根。保持单位不变
abs:计算数字的绝对值。保持单位不变
sin、asin、cos、acos、tan、atan:数学知识，自行补充。
pow:返回第一个参数的第二个参数次方的值。
min、max:最大最小值

类型函数

用于判断值是否属于某个类型，具体的函数如下： isnumber、isstring、iscolor、iskeyword、isurl、ispixel、isem、ispercentage、isunit、isruleset、isdefined

杂项函数

color:解析颜色，表示颜色的字符串成为颜色。 image-size:从文件中获取图片尺寸。 image-width:从文件中获取图片宽度。 image-height:从文件中获取图片高度。 convert:将数字从一种单位转换为另一种单位。示例：

scss 复制代码

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) 
//结果
9000ms
140mm
8

命名空间

假设你想在 #bundle 下打包一些混入和变量，以供以后重用或分发

css 复制代码

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

现在如果我们想在我们的 #header a 中混合 .button 类，我们可以这样做：

less 复制代码

#header a {
  color: orange;
  #bundle.button();  // can also be written as #bundle > .button
}

映射

从 Less 3.5 开始，你还可以使用混入和规则集作为值映射。类似于js的map

css 复制代码

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

//结果
.button {
  color: blue;
  border: 1px solid green;
}

作用域

Less 中的作用域与 CSS 中的作用域非常相似。首先在本地查找变量和混入，如果找不到，则从 "父级" 作用域继承。

less 复制代码

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

延迟加载

以下代码都是有效的

less 复制代码

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

.lazy-eval {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;

都可以进行正确的编译，编译成如下结果

css 复制代码

.lazy-eval {
  width: 9%;
}

注释

块式注释和行内注释都可以使用：

less 复制代码

/* One heck of a block
 * style comment! */
@var: red;

// Get in line!
@var: white;

总结

本文主要介绍了一些less的高级用法，有些语法在开发中能够很方便地帮助我们不借助javascript就能实现一些逻辑操作，小伙伴们可以自己动手试试，欢迎小伙伴们点赞加关注。